Animation

Apps, websites, and other digital products include animations for many reasons, such as drawing the user’s attention to a particular area or providing visual feedback when the user interacts with a de

Animation Settings

While variation exists across design software, standard animation settings include the following:

  • Duration, typically measured in milliseconds, is how long the animation lasts.

  • Style correlates to how the animation looks. For example, “Dissolve” creates a fading effect, and “Bounce” evokes a ball bouncing up and down.

  • Easing refers to the way an animation accelerates throughout its duration. Adjusting the easing further customizes the visual style of the motion. Check out this resource from Figma about easingarrow-up-right to explore how different easing options impact the animation.

This article from Adobe XDarrow-up-right about animation principles discusses how to apply animations to a prototype.

Articles

Last updated