This is all you need to know to achieve awesome animations!

  1. Curve
  2. Delay
  3. 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.

Did this answer your question?