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.
❗️Please note:
Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.
Get involved in our Anima Community Forum! 😎
New to Anima?