Indexwriting
Writing indexNote / Mar 18, 2024

Field note / motion design / motion graphics / branding

Motion Timing: How I Find the Right Tempo for a Brand

Animation tempo is a brand personality signal — finding the right speed requires more than guesswork.

Published
Mar 18, 2024
Length
3 min read / 653 words
Topics
motion design, motion graphics, branding

Speed Is a Statement

I've watched brand presentations where the motion designer clearly defaulted to the same timing they use on every project. The transitions are competent. The easing is smooth. But the motion feels generic because it doesn't belong to this brand specifically.

Motion timing is a brand decision, not just a technical one. How fast a brand moves communicates personality as directly as its color palette or typography.

Fast, Medium, Slow — and What Each Communicates

Fast motion — under 200ms for standard transitions — communicates confidence, modernity, and efficiency. It assumes the viewer is keeping up. It's used by tech brands, contemporary consumer brands, anything that wants to feel current and sharp. The risk: it can feel rushed or cold.

Medium motion — 250–400ms — is the neutral range. It's professional and clean without a strong personality signature in either direction. Most brand motion lives here by default. That's exactly why it's worth thinking carefully about whether your brand should deviate.

Slow motion — 500ms and beyond for standard transitions — communicates deliberateness, luxury, weight, and gravitas. Slower animation asks the viewer to slow down and attend. It's used by luxury brands, heritage institutions, and anything that wants to feel considered and unhurried. The risk: it can feel sluggish if not executed with craft.

Starting From the Brand Adjectives

Before I set a single timing value, I read the brand's personality descriptors. Three or four adjectives that characterize the brand at its best.

"Confident, precise, modern" points toward the faster end with sharp easing and minimal dwell time.

"Warm, considered, artisanal" points toward the medium-slow range with gentle ease-in-outs and breathing room between elements.

"Bold, energetic, disruptive" points toward fast with overshoot and expressive motion curves.

The adjectives are the brief. The timing values are the execution.

The Music Test

When I'm calibrating motion timing for a brand, I sometimes create a simple ambient track that matches the brand's personality and play it while watching my animations. If the motion feels out of sync with the music — too fast, too slow, wrong rhythm — that dissonance usually means something is off.

This is informal, but it taps into the same temporal intuition that makes music feel right or wrong. Brands have a tempo. Animation should live in that tempo.

Building a Timing Scale

Once I've established the base tempo, I build a timing scale — a set of duration values that all relate to each other logically, similar to how a type scale works.

A simple scale: 150ms (instant interactions), 250ms (small transitions), 400ms (standard transitions), 600ms (complex reveals), 1000ms (hero animations).

Everything in the motion system draws from this scale. The consistency creates a rhythmic coherence across different animated contexts — the motion always feels like it comes from the same place.

Stagger Timing

Stagger — the delay between sequential elements animating in — is where a lot of brand motion personality lives. Tight stagger (30–50ms between elements) creates rapid cascades that feel energetic. Loose stagger (100–200ms) creates deliberate sequences that feel composed.

I typically set stagger at about 15–20% of the main animation duration. A 300ms animation with 50ms stagger. A 600ms animation with 100ms stagger. This proportion keeps the stagger feeling rhythmically related to the motion rather than arbitrary.

The Final Check

I watch the finished animation muted. Then I watch it with sound on. Then I watch it at half speed to evaluate the easing quality.

If it holds up in all three conditions, the timing is right. If anything feels wrong at half speed, it needs work. Problems at half speed become certainties at full speed when something distracts the viewer.

Tempo is something you feel before you understand it. Design for the feeling.