other. Just like layering up clothing to create pleasant color and texture combinations, you
should layer animations to create pleasant motion design combinations.
For advice on the technical implementation of multistep effects, read Chapter 4,
“Animation Workflow.”
Stagger animations
When multiple sibling elements—say, a series of images in a gallery—are animating into
view at the same time, consider adding a tiny successive delay between them. (That is,
after the first image loads, a delay occurs before the second image loads, and so on.) To
delay the animation of sibling elements in this way is called staggering, and its purpose is
similar to that of breaking an animation into steps: it adds visual layering by preventing all
your elements from animating perfectly in sync, which can look plain and inelegant
compared to staggered loading. Why? Because animating a series of elements in sync
lacks any semblance of granularity or gradience. Consider this: Birds don’t fly side by side
in a straight line. What makes their aerial movements so graceful is their successive
formation and timing. It’s their juxtaposition, and the motion of their juxtaposition, that
makes them so elegant to the human eye.
Flow from the triggering element
If clicking a button causes a modal to appear, have the modal animate out from the
button’s location. In other words, have animations flow from the elements that trigger
them. This bridges the cause-and-effect relationships in your UI, making individual
elements feel better coupled and better organized.
To understand the psychological benefit of this technique, consider how motion works
in the real world: when you pull a lever, a series of mechanical parts causes a connected
object to move. Connected is the key word: real objects don’t move unless a force is
exerted upon them. Likewise, it’s important to treat every element in your UI as an
element capable of exerting its own force. Every action should feel connected to a trigger.
This sort of seamless experience is what helps an interface transcend from the digital into
the physical. The more physical an interface is, the more responsive and emotive it feels.
Use graphics
Make use of scalable vector graphics (SVG) to animate individual graphic components of
a larger element that the user can interact with (learn more in Chapter 6, “Scalable Vector
Graphics Primer”). A common example of this is the trio of horizontal lines that constitute
a “hamburger menu” icon, or the dots that form a circle in a loading indicator. In both of
these examples, arbitrary shapes are grouped together to form a common UI component.
Before SVG animation was possible on the web, the common approach to animating a
graphic like either of the two described was to embed the full graphic as a PNG image and
then animate the entire shape by transitioning its opacity in CSS. By leveraging SVG,
however, you can animate these unique elements on an individual shape-by-shape basis
and subject them to many types of property animations.
Graphic animation is a surefire way to add nuance to key portions of your UI. This