How to animate user interfaces

Motion should be used to add clarity to a user interface, and then sparingly and with nuance. A little bit goes a long way.

Learning Objectives

define “state” in the context of a user interface
describe how the effect of animation is created on screens
differentiate between animation sequences (like cartoons) and animation in interfaces (state transitions)
create an animated transition in Principle
animate a screen element in Principle imported from Sketch
list examples of properties with can be animated in interfaces
differentiate between system- and user-triggered state changes
define “easing” in the context of an animation transition