Shots in this scene

← scene 18 · Motion Systems in Production ▦ the storyboard

SHOT 19.2Advanced ~15 min · shot 2 of 6

Interview: Motion Design and Accessibility

In one line

Design interviews ask why 220 ms, why a spring, when you would not animate, how you handle reduced motion and what the WCAG numbers are. Six model answers, each tied to something this course measured.

0/6 · 0%

Think of it like this

In a design review Ama does not ask "is it pretty?" She asks "why 220 ms, and what happens if I click twice?" A good answer names the job, a number and the case where it would break.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

spring: Motion from a physical model (stiffness, damping, mass) instead of a duration. It can keep its speed when the target changes.
WCAG: The Web Content Accessibility Guidelines: testable rules, each with a number and a level (A, AA or AAA).
essential motion: Motion with no other way to give the same information, such as real progress.
interruption: The visitor changes the target while an animation runs, for example a second click.

Step by step

01Run the classifier

Run "The three questions of 2.2.2". Three animations start. Each line says how long the movement lasts, whether the page or a click started it, and what 2.2.2 requires.

02Read the pulse

The pulse never ends and starts by itself, so it needs a control. The intro lasts one second, so it needs none. The tour lasts eight seconds but the visitor started it, so the rule does not apply.

03Know its limits

It checks timing and who started it. It cannot know whether the motion sits beside other content or is essential: a person decides that. Say so in the interview.

04Connect it to the site

The launch site's hero drifts for ever. The footer's Motion toggle (Topic 7.5) is its control, and the launch audit (Topic 19.5) looks for that control.

Try it yourself

1
Make the pulse finite
Change iterations: Infinity to iterations: 5. The pulse line becomes pulse: lasts 4000 ms, starts by itself -> no control needed (not over 5 s).

Code & diagrams

The three questions of 2.2.2

Open the timeline: the pulse's track has no end. The lines come from `getComputedTiming().activeDuration`, which counts the movement and ignores a delay.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

intro: lasts 1000 ms, starts by itself -> no control needed (not over 5 s)
pulse: never ends, starts by itself -> needs a pause, stop or hide control
tour: lasts 8000 ms, started by a click -> outside 2.2.2

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Write the CSS word in the Web Animations API

Change iterations: Infinity to iterations: "infinite", as in CSS.

terminal

$ Run the example

── what you'll see ──

[error] Uncaught TypeError: Failed to execute 'animate' on 'Element': iterationCount must be non-negative

Real text from Chromium 153. The intro line prints first.

Myth vs fact

Myth

Springs are always better than easing curves.

Fact

A spring earns its place where things are interrupted or thrown. For a toast on a timer, a short duration with ease-out is simpler, predictable and easier to test.

Remember this

1
The problem this solves: taste is hard to defend, and accessibility answers are often vague ("we support reduced motion"). With measured numbers (the 120, 220 and 400 ms tokens, the 76% an ease-out token reaches in a quarter of its time, the WCAG levels) you defend a choice instead of just liking it.
2
Three WCAG motion rules, by number and level. 2.3.3 Animation from Interactions is AAA: interaction-triggered motion can be disabled unless essential. 2.2.2 Pause, Stop, Hide is A: anything that starts by itself, lasts over five seconds and sits beside other content needs a control. 2.3.1 Three Flashes is A: no more than three flashes in any second.
3
Reduce, do not remove. The calm version of a slide is a short fade: the change stays visible and the travel goes (Topic 7.2). The trap interviewers like is * { animation: none !important } in the reduced block: code waiting for animationend waits for ever. A tiny duration still fires the event.
4
Each tool has a place. A spring is described by stiffness, damping and mass, has no fixed length and keeps its speed when interrupted. A tween restarts from rest. A view transition snapshots the page and animates bitmaps. Knowing what each cannot do is the senior answer. Start every answer from the job the motion does (Topic 2.1), and end it with how you would test.

Explain it without notes

Springs or fixed durations: how do you choose?

How do you choose an easing, and why those durations?

When would you not animate something?

How do you handle reduced motion, and what does the blanket reset get wrong?

Which WCAG success criteria cover motion?

View Transitions or FLIP?

Practice

A teammate adds * { transition: none !important; animation: none !important; } inside the reduced-motion query. Write the review comment and the fix.

A product manager wants every button press to bounce. Argue against it in three sentences and offer an alternative.

Done when you can

You can start any answer from the job the motion does
You can give the three WCAG motion criteria with their numbers and levels
You can explain the blanket reduced-motion trap
You can choose between a spring, a tween, FLIP and a view transition and say what each cannot do