Skip to content

Commit

Permalink
Merge pull request #779 from grahammendick/animios-docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@grahammendick
grahammendick authored Apr 18, 2024
2 parents 636a629 + c2c5096 commit 21a5631
Show file tree
Hide file tree
Showing 22 changed files with 33 additions and 33 deletions.
2 changes: 1 addition & 1 deletion documentation/native/bottom-sheet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html" class="selected">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
24 changes: 12 additions & 12 deletions documentation/native/custom-animation.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<html>
<head>
<title>Custom Animation (Android)</title>
<title>Custom Animation</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../../css/prism.css">
<link rel="stylesheet" href="../../css/navigation.css">
Expand Down Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html" class="selected">Custom Animation (Android)</a>
<a href="custom-animation.html" class="selected">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand All @@ -50,26 +50,26 @@ <h3>Web</h3>
</div>
</div>
<div id="article">
<h1>Custom Animation (Android)</h1>
<h1>Custom Animation</h1>
<p>
You can change the default Android animation that runs when a scene is pushed onto or popped off the stack. You provide the position of the scene when it's off the stack in the <code>unmountStyle</code> prop of the <code>NavigationStack</code>. The Navigation router uses the underlying native transition api to animate it into place. In our email application, we start the 'mail' scene off to the right of the screen. The Navigation router slides it when the user selects a mail and back out again when they return to their inbox.
You can change the default animation that runs when a scene is pushed onto or popped off the stack. You provide the position of the scene when it's off the stack in the <code>unmountStyle</code> prop of the <code>NavigationStack</code>. The Navigation router uses the underlying native transition apis on Android and iOS to animate it into place. In our email application, we start the 'mail' scene off to the right of the screen. The Navigation router slides it in when the user selects a mail and back out again when they return to their inbox. Without the <code>customAnimation</code> prop the animation only runs on Android.
</p>
<pre><code class="language-jsx">&lt;NavigationStack unmountStyle={{type: 'translate', startX: '100%'}}></code></pre>
<pre><code class="language-jsx">&lt;NavigationStack customAnimation unmountStyle={{type: 'translate', startX: '100%'}}></code></pre>
<p>
You can also specify the position of the scene when it's hidden in the stack using the <code>crumbStyle</code> prop of the <code>NavigationStack</code>. The Navigation router will animate the current scene to and from that position when a new scene is pushed and then popped. By setting the crumb's start opacity to 0, when the user opens an email the 'inbox' scene fades out as the 'mail' scene slides in from the right.
</p>
<pre><code class="language-jsx">&lt;NavigationStack crumbStyle={{type: 'alpha', startX: 0}}></code></pre>
<pre><code class="language-jsx">&lt;NavigationStack customAnimation crumbStyle={{type: 'alpha', start: 0}}></code></pre>
<p>
We can make the 'inbox' scene shrink as well as fade by passing in multiple start styles.The Navigation router runs both animations together when a user opens an email.
</p>
<pre><code class="language-jsx">&lt;NavigationStack crumbStyle={[
{type: 'alpha', startX: 0},
{type: 'scale', startX: 0.8, startY: 0.8}
]}></code></pre>
<pre><code class="language-jsx">&lt;NavigationStack customAnimation crumbStyle={[
{type: 'alpha', start: 0},
{type: 'scale', startX: 0.8, startY: 0.8}
]}></code></pre>
<p>
The <code>Scene</code> component also has <code>unmountStyle</code> and <code>crumbStyle</code> props so you can have different animations for different scenes. In our email application, we want every scene to slide in from the right apart from the 'compose' scene. To make it slide up from the bottom of the screen we configure a special <code>unmountStyle</code> for just the 'compose' scene.
The <code>Scene</code> component also has <code>unmountStyle</code> and <code>crumbStyle</code> props so you can have different animations for different scenes. In our email application, we want every scene to slide in from the right apart from the 'compose' scene. To make it slide up from the bottom right of the screen we configure a special <code>unmountStyle</code> for just the 'compose' scene.
</p>
<pre><code class="language-jsx">&lt;Scene stateKey="compose" unmountStyle={{type: 'translate', startY: '100%'}}>
<pre><code class="language-jsx">&lt;Scene stateKey="compose" unmountStyle={{type: 'translate', startX: '100%', startY: '-100%'}}>
&lt;Compose />
&lt;/Scene></code></pre>
</div>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/deep-links.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html" class="selected">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/drawer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/floating-action-button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html" class="selected">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/hello-world.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/navigation-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/pop-navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/push-navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/scene-navigation-lifecycle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html" class="selected">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/shared-element-transition.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html" class="selected">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/tab-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/typescript.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>
<a href="bottom-sheet.html">Bottom Sheet</a>
<a href="floating-action-button.html">Floating Action Button (Android)</a>
<a href="scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="custom-animation.html">Custom Animation (Android)</a>
<a href="custom-animation.html">Custom Animation</a>
<a href="shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="deep-links.html">Deep Links</a>
<a href="typescript.html" class="selected">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/browser-history.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
<a href="../custom-animation.html">Custom Animation</a>
<a href="../shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="../deep-links.html">Deep Links</a>
<a href="../typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/custom-animation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
<a href="../custom-animation.html">Custom Animation</a>
<a href="../shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="../deep-links.html">Deep Links</a>
<a href="../typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
<a href="../custom-animation.html">Custom Animation</a>
<a href="../shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="../deep-links.html">Deep Links</a>
<a href="../typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/hyperlinks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
<a href="../custom-animation.html">Custom Animation</a>
<a href="../shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="../deep-links.html">Deep Links</a>
<a href="../typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
<a href="../custom-animation.html">Custom Animation</a>
<a href="../shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="../deep-links.html">Deep Links</a>
<a href="../typescript.html">TypeScript</a>
Expand Down
2 changes: 1 addition & 1 deletion documentation/native/web/shared-element-transition.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2>
<a href="../bottom-sheet.html">Bottom Sheet</a>
<a href="../floating-action-button.html">Floating Action Button (Android)</a>
<a href="../scene-navigation-lifecycle.html">Navigation Lifecycle</a>
<a href="../custom-animation.html">Custom Animation (Android)</a>
<a href="../custom-animation.html">Custom Animation</a>
<a href="../shared-element-transition.html">Shared Element Transition (Android)</a>
<a href="../deep-links.html">Deep Links</a>
<a href="../typescript.html">TypeScript</a>
Expand Down

0 comments on commit 21a5631

Please sign in to comment.