All Collections
FAQs for Design
Create Animations Easily in Sketch
Create Animations Easily in Sketch

Create very realistic animations by understanding Animation Curves and Easing Functions using Anima!

Michal avatar
Written by Michal
Updated over a week ago

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?

Learn More

Did this answer your question?