Experiment Repeatedly
Finding the right duration, stagger, easing, and property combinations for each
animation is not a skill that designers are born with. It’s a skill that every great
designer has had to learn. So, remember: your first attempt at a combination of
animation properties might look good, but it’s probably not the best case. There are
only two ways to find the best case: experiment by systematically changing each
factor in the motion design equation until you stumble onto something sublime, or
borrow ideas from other peoples’ work. Once you’ve found a combination you like
—even if it’s one you’ve already borrowed elsewhere pixel-for-pixel—experiment
further. Consider cutting the duration in half, switching to a completely different
easing type, or swapping out a property.
Designers are often averse to extended experimentation because—even though
there are a million ways to animate a button into view—each way effectively
fulfills the goal at hand: making the button visible. Consequently, once you stumble
onto a combination of properties that look good, you’re likely to stick with it
because it looks good and it works. But don’t forget that goodness isn’t a
respectable design goal—greatness is. Greatness entails stepping outside your
comfort zone, and not necessarily relying on what you already know works.Wrapping up
Utility and elegance are your goals. At minimum, all animation code must fulfill one or
the other.
When implemented properly, animation code should provide concrete value to your UX
and not adversely impact the website’s performance. No matter how sleek your motion
design is, if the interface is laggy as a result of its implementation, the overall user
experience will not be elegant. You’ll learn more about the importance of performance in
the Chapter 7, “Animation Performance.”