Motion Design
02 / Timing & Rhythm
Key question
How long does a movement take?
The same movement feels nimble in 200 milliseconds and stately in two seconds. Timing is the most important tool in motion design. It determines whether an animation is helpful or annoying.
Learning objective: You can choose appropriate durations for different purposes, stagger elements in a choreography, and work with frame rate and rhythm.
Timing determines the impact.
2.1 / Duration
The smaller, the faster.
How long a movement takes depends on its purpose and the distance. Three areas help provide orientation.
01
Feedback
100 to 200 milliseconds. A button, a switch, a tick.
02
Transition
200 to 400 milliseconds. A menu, a dialogue, a page change.
03
Narrative
Half a second to several seconds. An intro, a logo, an explainer video.
Large areas and long distances take a bit more time than small ones. On mobile, everything can be slightly faster than on a large screen.
Small things move quickly.
2.2 / Staggering and choreography
One thing at a time instead of everything all at once.
When multiple elements appear, it feels calmer if they are slightly staggered. This staggering guides the eye in a set order: first the title, then the image, then the text.
The whole choreography should remain short. Six elements with a 300-millisecond delay take almost two seconds. That is too long for an interface. In a film's intro, it might be just right.
Graduation guides the eye.
2.3 / Frame rate and rhythm
Frames per second and clock rate.
Films usually run at 24 or 25 frames per second, with 25 being common in Europe. For social media, 25 or 30 is typical, and for smooth interfaces, 60. The higher the frame rate, the smoother it is, but also the larger the file size.
Movement with music has a stronger impact when cuts and accents fall on the beat. At 120 beats per minute, a beat lands every half a second. This creates a rhythm you can feel, even without actively listening.
Cut to the beat.
Exercise
A choreography
Task: Design the intro animation for the Museum Klang website.
STEP 1
Specify the order in which the logo, title, image, and navigation appear.
STEP 2
Choose the duration and easing for each element.
STEP 3
Stagger the elements so that everything appears in under a second.
STEP 4
Build a second, festive version for the foyer screen with music synced to the beat.
Evaluation: How do the two versions differ, and why does each one fit its context?