Motion rules for people who don’t animate

There are four of us in the motion team at Orvel. We make the launch films and the title sequences, and we spend a lot of time on how marks move. But when we count the moving things a brand ships in its first year, we make perhaps one in twenty of them. The rest are made by a front-end developer adding a hover state, a marketer building a story on a phone at eleven at night, an editor cutting a loop for a trade-show screen. None of them should need animation software, or a call with us, to get it right. So every identity we hand over now comes with a single page of motion rules written for people who do not animate. These six appear, in some form, on almost all of them.

• Move one thing at a time. If the headline, the image and the button all arrive together, nothing arrives. Stagger them, or better, move only the one that matters.
• Fast in, faster out. Most interface motion should take between 150 and 300 milliseconds, and things leaving the screen should take about two thirds as long as things arriving.
• Never bounce. Springs and overshoots read as playful in a game and as unreliable almost everywhere else, especially near money, health or the law.
• Travel a short way, in a straight line. Elements slide a few pixels into place; they do not fly in from the edge of the screen.
• Leave the way you came. If a panel slides up to open, it slides down to close, so people always know where things went.
• Always have a still version. Anything that moves must make sense with motion switched off, because some people switch it off and every screenshot does.

If you notice the animation, it is probably too slow.

Why numbers beat adjectives

The first motion guidelines we wrote, years ago, described movement in adjectives: confident, gentle, responsive. They were close to useless. A developer cannot type “confident” into a stylesheet, and an editor’s idea of gentle may be twice as slow as ours. Now every rule comes with a number, and each brand gets exactly two easing curves and three durations, supplied as values a developer can paste and presets an editor can load. Restricting the choice sounds limiting. In practice it is what lets a dozen people who have never met produce work that moves like one brand.

A test anyone can run

The check we give clients for judging motion without us is simple: watch it three times. The first time, it should feel as though nothing in particular happened, only that the screen changed smoothly. The second time, you should be able to say what moved and why. The third time, it should not annoy you. Most motion that fails, fails on the third viewing, and that is the one that matters, because someone using an app every day sees the same transition hundreds of times a month. Then switch on the reduced-motion setting on your own phone and check that the page still makes sense without it.

What the rules are not for

Rules like these will never produce a beautiful launch film or a title sequence people remember. That is still our job, and it gets more of our time than anything else. What the rules produce is quieter and probably more valuable: a brand that moves the same way in a hundred places we will never see, made by people who did not have to become animators to get there.