Motion Graphics: Timing Is Everything

When I teach motion design basics, the first lesson is always about timing. Not software. Not technique. Not easing curves. Timing.

You can have perfect easing, technically correct motion, well-constructed geometry — and if the timing is wrong, the motion will feel off. Something that's too fast reads as cheap and frantic. Something that's too slow reads as labored and self-important. Right timing is almost invisible. You just feel that the motion is natural and appropriate.

Developing a sense of timing is the work of years. But there are principles I can share that accelerate that development.

Duration and Brand Character

Every brand communicates at a particular tempo. That tempo needs to be expressed in motion as consistently as it's expressed in type and color.

As a starting point, here are the duration ranges I use for different brand registers:

Fast, energetic brands (consumer, entertainment, youth): Primary animations 0.15–0.3 seconds. Transitions 0.1–0.2 seconds.

Neutral, professional brands (software, B2B, services): Primary animations 0.25–0.45 seconds. Transitions 0.15–0.3 seconds.

Premium, deliberate brands (luxury, finance, institutional): Primary animations 0.4–0.7 seconds. Transitions 0.3–0.5 seconds.

These aren't rules. They're starting points for calibration. The right timing for any specific animation depends on the size of the element, the distance it travels, the emotional register of the context, and a dozen other factors.

The Size-Duration Relationship

Larger elements need longer durations to feel right. A small icon transitioning in 0.2 seconds feels natural. The same easing curve applied to a full-screen background transition at 0.2 seconds feels like a visual glitch.

The principle: larger elements carry more visual weight and need more time to travel and settle. A rough starting formula: for every 100px of travel distance or every 200px of element size, add approximately 50ms to the base duration.

The Stagger Principle

When multiple elements animate as a group, staggering the timing between each element's start makes the motion feel organic rather than mechanical. All elements starting simultaneously looks robotic. Elements starting in sequence, with a small delay between each, suggests life.

The stagger timing should be proportional to the total animation duration. For a 0.5 second group animation, a stagger of 50–80ms between elements usually feels right. Too little stagger and it looks like a synchronization error. Too much stagger and the group loses its unity.

Holding Duration

An often-overlooked timing decision: how long a final state holds before the next animation begins. When a brand animation completes and the finished mark is on screen, how long does it sit before transitioning?

Too short a hold and the viewer hasn't processed what they saw. Too long a hold and the motion context evaporates and the next animation feels unconnected.

My default holding duration for logo reveal animations in video contexts is 1.5–2.5 seconds. For interactive contexts (loading states, micro-interactions), holds can be shorter because the user is actively engaged.

The Calibration Process

My process for timing calibration: animate something at what feels right, then slow it to half speed and watch it. Then play it at double speed. The slowdown reveals whether the motion has interesting qualities at its core — whether the easing is doing interesting work. The speedup reveals whether the pacing feels forced or natural.

Then ask: does this tempo feel like this brand? Play it alongside the brand's visual identity, alongside the music or sound design if applicable. Does it fit?

Timing that fits is timing that's done.