Motion Graphics Timing Principles 206

title: "The Timing Principles I Rely On in Motion Graphics" description: "Why duration and easing are the real craft in motion design." date: "2022-04-03" tags: "motion graphics", "motion design", "animation" draft: false

Motion design is mostly invisible

When motion graphics are working, nobody notices them. The logo animation resolves with a satisfying weight, the lower third slides in with confidence, the transition feels inevitable. When they're not working, everyone feels it — even clients who can't explain why something "feels off." The thing they're responding to is almost always timing.

I've been doing motion work long enough to have made every timing mistake in the book. These are the principles I've landed on after iterating through all of them.

Duration is a statement about personality

Every animated element has a duration — the total time it takes to complete its motion. That duration is a personality statement. Fast motions read as energetic, confident, modern. Slow motions read as deliberate, premium, weighty.

The mistake is inconsistency within a single piece. If your logo animation resolves in 600ms but your lower third comes in over 1.2 seconds, the piece feels like two different designers worked on it. Duration should be systematized: establish a base duration for your project and express all other durations as multiples or fractions of that base.

For most broadcast motion work I do, my base duration is 300-400ms. UI-adjacent motion work tends to be faster — 200-250ms. Cinematic title sequences can go much slower, sometimes over 1 second per major beat.

Easing is where craft lives

Duration is the how-long. Easing is the how. And easing is where the craft of motion design actually lives.

Ease-in means the element starts slow and accelerates. Ease-out means it starts fast and decelerates. Ease-in-out does both. Linear has no easing at all and almost always looks mechanical and wrong.

I use ease-out for most entrances — elements should decelerate as they arrive, like physical objects coming to rest. I use ease-in for exits — objects should accelerate as they leave, as if being pulled away. This mirrors how objects behave in the physical world, which is why it reads as natural even to viewers who have no design vocabulary.

Stagger is your friend

When multiple elements animate in sequence, stagger — the delay between each element's start — creates rhythm. No stagger means everything hits at once and the motion reads as a single event rather than a sequence. Too much stagger and the animation feels slow and disconnected.

My rule for stagger: use roughly 20-30% of the element's own duration as the stagger offset. If each element takes 400ms to animate in, I offset each one by 80-120ms. This creates a cascade that reads as deliberate and musical.

Build a timing reference

For any project with more than three animated elements, I build a timing reference — essentially a beat sheet that maps every element's entry, hold, and exit across the timeline. Without this, timing decisions accumulate randomly and the piece loses coherence.

The reference doesn't need to be elaborate. A simple spreadsheet or even a hand-drawn timeline grid works. What matters is the intentionality — making timing decisions consciously rather than by feel alone.