|
1 | 1 | --- |
2 | | -name: 3. Advanced usage |
| 2 | +name: 3. Advanced usage 😲 |
3 | 3 | route: /advanced-usage |
4 | 4 | order: 3 |
5 | 5 | --- |
@@ -39,12 +39,105 @@ import EmailChain from './EmailChain'; |
39 | 39 |
|
40 | 40 | # Advanced usage |
41 | 41 |
|
| 42 | +## Controlling in what order animations should execute |
| 43 | + |
| 44 | +Animations are executed from top to bottom. |
| 45 | +The parent-most animation will be executed first and then continue execution inwards. |
| 46 | + |
| 47 | +So if we had two animations, Move and CrossFade: |
| 48 | + |
| 49 | +```js |
| 50 | +<Baba name="move-first"> |
| 51 | + <Move> |
| 52 | + <CrossFade>{props => <div {...props} />}</CrossFade> |
| 53 | + </Move> |
| 54 | +</Baba> |
| 55 | +``` |
| 56 | + |
| 57 | +When executed the order would look like: |
| 58 | + |
| 59 | +1. Move **beforeAnimate** fired |
| 60 | +1. CrossFade **beforeAnimate** fired |
| 61 | +1. Move **animate** fired |
| 62 | +1. CrossFade **animate** fired |
| 63 | +1. Move **afterAnimate** fired |
| 64 | +1. CrossFade **afterAnimate** fired |
| 65 | + |
| 66 | +<br /> |
| 67 | + |
| 68 | +If we placed CrossFade first: |
| 69 | + |
| 70 | +```js |
| 71 | +<Baba name="cross-fade-first"> |
| 72 | + <CrossFade> |
| 73 | + <Move>{props => <div {...props} />}</Move> |
| 74 | + </CrossFade> |
| 75 | +</Baba> |
| 76 | +``` |
| 77 | + |
| 78 | +Then their order would be inversed: |
| 79 | + |
| 80 | +1. CrossFade **beforeAnimate** fired |
| 81 | +1. Move **beforeAnimate** fired |
| 82 | +1. CrossFade **animate** fired |
| 83 | +1. Move **animate** fired |
| 84 | +1. CrossFade **afterAnimate** fired |
| 85 | +1. Move **afterAnimate** fired |
| 86 | + |
| 87 | +## Wait for the previous animation to finish before starting the next |
| 88 | + |
| 89 | +Depending on the animations chosen you'll want to defer starting one until the previous has finished. |
| 90 | +Luckily the [Wait](/wait) component has been made for that! |
| 91 | + |
| 92 | +Continuing the example above, |
| 93 | +if we introduce the Wait component: |
| 94 | + |
| 95 | +```js |
| 96 | +<Baba name="wait"> |
| 97 | + <CrossFade> |
| 98 | + <Wait> |
| 99 | + <Move>{props => <div {...props} />}</Move> |
| 100 | + </Wait> |
| 101 | + </CrossFade> |
| 102 | +</Baba> |
| 103 | +``` |
| 104 | + |
| 105 | +Then the Move animation will wait for the CrossFade animation to complete finish before starting, |
| 106 | +the order then becoming: |
| 107 | + |
| 108 | +1. CrossFade **beforeAnimate** fired |
| 109 | +1. CrossFade **animate** fired |
| 110 | +1. Move **beforeAnimate** fired |
| 111 | +1. Move **animate** fired |
| 112 | +1. CrossFade **afterAnimate** fired |
| 113 | +1. Move **afterAnimate** fired |
| 114 | + |
| 115 | +> **Tip -** Notice that afterAnimate's are always called the the same regardless of Wait usage. |
| 116 | +
|
42 | 117 | ## Delay showing content until all animations have finished |
43 | 118 |
|
44 | 119 | Occasionally when initiating an animation we can have some secondary content we want to keep hidden until the animation has finished. |
45 | 120 | Luckily [BabaManager](/baba-manager) exists to do just that! |
46 | 121 | Make it a parent of any [Baba](/baba) and it will show its content only when the animation has finished. |
47 | 122 |
|
| 123 | +```js |
| 124 | +<BabaManager> |
| 125 | + {manager => ( |
| 126 | + <div> |
| 127 | + <Baba name="hide-children-until-animations-have-finished"> |
| 128 | + <CrossFade> |
| 129 | + <Move>{props => <div {...props} />}</Move> |
| 130 | + </CrossFade> |
| 131 | + </Baba> |
| 132 | + |
| 133 | + <span {...manager}>Children content</span> |
| 134 | + </div> |
| 135 | + )} |
| 136 | +</BabaManager> |
| 137 | +``` |
| 138 | + |
| 139 | +Children content will be shown after **all** animations have completed. |
| 140 | + |
48 | 141 | > **Tip -** If you have multiple child [Baba](/baba) you can pass [BabaManager](/baba-manager) a `name` prop to target a specific [Baba](/baba). |
49 | 142 |
|
50 | 143 | ## Using supporting animations |
@@ -97,14 +190,6 @@ used together can produce a really cool transition between states. |
97 | 190 | > **Tip -** [BabaManager](/baba-manager) has been used as well to hide the next contents until the animation has finished, |
98 | 191 | > resulting in that crisp transition. |
99 | 192 |
|
100 | | -## Wait for the previous animation to finish before starting the next |
101 | | - |
102 | | -Depending on the animations chosen you'll want to defer starting one until the previous has finished. |
103 | | -Luckily the [Wait](/wait) component has been made for that! |
104 | | - |
105 | | -> **Tip -** Animations are executed from top to bottom. |
106 | | -> The parent-most animation will be executed first and then continue execution inwards. |
107 | | -
|
108 | 193 | ## Moving using a focal target |
109 | 194 |
|
110 | 195 | At times we want to move all content at once but have it originate from a focal point. |
|
0 commit comments