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 design element. Animation can support usability or undermine it, as discussed in Nielsen Norman Group’s article about the role of animation in UX.

In the example above, moving the cursor over a particular Codecademy course or path triggers an animation. In UI and UX design projects, animations add motion, which transforms static designs into interactive prototypes. Design software includes features for adding animations that simulate how a user will navigate through the design and interact with it.

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 easing to explore how different easing options impact the animation.

This article from Adobe XD about animation principles discusses how to apply animations to a prototype.