Timing: how long things take
Timing is the most consequential decision in any animation, and the cheapest one to change. The same move at 150 milliseconds feels crisp, at 400 milliseconds feels deliberate and at 800 milliseconds feels broken. Nothing else about the animation has to change for those three impressions to appear.
Useful reference points for screen work: micro-feedback like hover states and toggles lives between 100 and 150 milliseconds. Standard transitions, a panel opening or an element entering, sit between 200 and 300 milliseconds. Anything above half a second has to earn its duration by covering real distance or carrying real meaning, like a full scene change in a product video.
A practical rule: when an animation feels wrong, halve the duration before you touch anything else. Most amateur motion is simply too slow, and speed hides many other sins.
Spacing: how change is distributed
Spacing is the classical animator’s word for what code calls easing. Draw a ball moving across twelve frames. If the ball covers the same distance in every frame, the motion is even and dead. If the distances start large and shrink toward the end, the ball decelerates into its resting place and suddenly reads as alive. Same duration, same start, same end, entirely different character.
Every easing curve you will ever pick is a spacing decision: where along the timeline the change concentrates. The easing guide in this series goes deep on curves. The thing to internalize here is that duration and spacing are independent controls, and spacing carries most of the personality.
Anticipation and follow-through
Anticipation is a small counter-move before the main action: the crouch before the jump. Follow-through is what keeps moving after the main action stops: hair settling after a head turn. Both exist because real things have mass, and audiences carry that expectation onto screens without knowing it.
In interfaces, anticipation should be nearly invisible: a button compressing a few percent on press before its action fires, a card dipping slightly before it lifts. Follow-through shows up as soft overshoot, an element gliding a few pixels past its target and settling back. Use a single, small overshoot on playful surfaces, and skip it entirely on text and data, which need to land precisely to stay legible.
The rest of the family
Several more of the classic principles survive the jump to screens intact:
- Staging: one focal point per moment. If everything moves, nothing reads. Let one hero element lead and keep the rest quiet.
- Overlapping action: related elements start with small offsets instead of moving in lockstep. In interfaces this is the stagger, and 40 to 80 milliseconds between items is usually enough.
- Secondary action: subtle supporting motion that enriches the main move without competing with it, like a shadow deepening while a card lifts.
- Exaggeration: pushing a move slightly past realistic so it reads at a glance. Product videos tolerate far more of it than everyday UI.
- Slow in and slow out: the ancestor of ease-in-out. Natural movement accelerates and decelerates; only machines change speed instantly.
Putting it together
The principles compound. A 220 millisecond entrance with decelerating spacing, a 60 millisecond stagger and one quiet focal point looks professional even with plain assets, because every choice cooperates. Break one principle, say by moving three unrelated elements at once, and the same assets suddenly look cheap.
When we tuned the Vembie Motion Engine, these rules were encoded first. Not out of nostalgia, but because studying hours of high-end motion design kept confirming the same thing: the work that feels expensive follows them almost without exception, and the work that feels generated is usually breaking two or three at once.