If you have a really cool idea for animating your content into view, then do it here. But
be sure to respect all the other rules in this chapter, especially limiting durations.
Consider personality
If you were designing a corporate site, you wouldn’t use a bounce effect to transition
elements into view. Bounciness is playful—not a quality that corporate sites often want to
convey. And if you were designing an educational or government app, you wouldn’t use
easings that result in movement that starts very quickly before finishing very slowly
(thereby conveying a whizzing-by-your-face futuristic slickness)—these would probably
be too glossy and stylized for the content at hand.
Always be considerate of the personality expressed by your animation decisions. As a
designer, it’s hard to judge the tone of your own work, so it’s a good idea to get third-party
feedback early and often. Ask test users whether a UI feels suitably professional, friendly,
and sleek, and tweak your motion design according to your preference for each of those
three traits.
Go beyond opacity
The most common means of transitioning an element into or out of view is to animate its
opacity from 0 to 1, and vice versa. This can be rather boring. Opacity is just the base
property that has to be animated when displaying or hiding content—it’s not the only
property. You can spice up your property choices by scaling an element down into view,
sliding it up out of view, or changing its background color. As you add more properties to
an animation, consider leveraging multistep effects, which you’ll learn about in the next
technique.
Break animations into steps
The simplest path to professional-looking motion design is to break animations into
multistep effects. For example, if you’re animating an image into view by transitioning its
opacity and scale from 0 to 1, instead consider first animating the element’s
opacity to 0.5—half of its final value—followed by animating its scale from 0 while
simultaneously animating the remaining half of opacity. Breaking the animations of
properties into steps like this removes the linearity that’s common to most amateur motion
design on the web—wherein all properties animate perfectly in sync. In the real world, the
properties of objects in motion don’t all accelerate in sync: Consider how, when a bird
flies, it moves forward (translateX) at a different rate than it moves up and down
(translateY). If it were instead to move linearly in both of its X and Y axes, it would
look more like a bullet than an animal. Great motion design borrows from the movement
of living, breathing things because UIs are made for humans—not machines—and humans
like to feel expression and reaction.
If you pay attention to the futuristic UI animation depicted in movies, you’ll notice that
intricate multistep animations are a key component in making them look so sleek. The
reason for this is simple, and it further supports the case for avoiding linearity: humans are
attracted to variety and contrast. Consider how, when you break up an animation, you’re
contrasting and juxtaposing the individual components of that animation against each