Animations are a very important part of prototyping so getting them to look right is crucial. In this guide we will present 3 main principles (i.e: Curve, Delay and Duration) that will improve your animations and leave your team (and even stakeholders) completely amazed! 😎

Skip to a section

Principle 1: Curve πŸ“ˆ

This feature manages the easing function, which determines the rate of change of a parameter or element over time. In other words: How a value is changed (e.g: the position of a component) over time.

There are 4 main types:

  • 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.

Principle 2: Delay ⏰

This determines how long it will be until the animation starts playing.

Principle 3: Duration πŸ“†

This determines how long the animation takes from start to finish.

Get involved in our Anima Community Forum! 😎

New to Anima?

Learn More

Did this answer your question?