This is all you need to know to achieve awesome animations!
- Curve
- Delay
- Duration
1. Curve
Manages the easing function which determines rate of change of a parameter over time. In other words: How to change a value, for example the position of a component, over time.
Linear: As time moves along, the value increases in equal amounts.
Ease-In: Causes the animation to start more quickly than linear ones, and it also has deceleration at the end.
Ease Out: This is the opposite of Ease-In. Animation starts slow and ends fast.
Ease In Out: Slow start, fast middle, and slow end.
2. Delay
How long until the animation plays or component moves.
3. Duration
How long the animation takes from start to finish.