Shots in this scene

← scene 18 · Motion Systems in Production ▦ the storyboard

SHOT 19.5Advanced ~32 min · shot 5 of 6

The Launch Audit

In one line

A motion audit that runs in the page and checks five rules: no layout properties animated, reduced motion respected, nothing long and automatic without a pause, interrupts that do not jump, and nothing left running after a part is removed. It fails first, then passes.

0/6 · 0%

Think of it like this

Before a plane takes off the crew reads a checklist aloud, though they have flown a thousand times. The list cannot fly; it catches the one thing a tired person forgets. The audit is Lumen's pre-flight list for motion.

Words you'll meet

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

audit: Automatic checks with a pass or fail for each, run on every build.
activeDuration: How long an animation's movement lasts: duration times iterations, without the delay. Infinity for endless.
leak: Work a removed part left running.
pending frame: A requestAnimationFrame callback asked for but not yet run. A loop that never ends always has one.

Step by step

01Audit the broken panel

Run "Audit: the broken panel" (Topic 19.4's panel). It prints FAIL or skipped with the offenders' names: #fill:width, span.badge and sparkle.

02Run it as a reduced-motion user

Switch on Reduced motion and replay. reduced-motion is no longer skipped: it fails span.badge, which still pulses.

03Audit the fixed panel

"Audit: the fixed panel" prints PASS for every rule and AUDIT PASSED.

04Run it on the real site

tests/audit.spec.js loads tests/launch-audit.js into the site in real Chromium, declares the drawer's gesture and three leak tests, and asserts every rule passes, once normally and once with reduced motion. The drawer leak test waits 1,800 ms: with 900 ms it twice failed (drawer (0 animations, 1 loops left)) while the spring still settled.

terminal

$ npx playwright test audit

── expected output ──

Running 2 tests using 1 worker

ok 1 tests/audit.spec.js:22:1 › the launch site passes the motion audit (12.7s)

ok 2 tests/audit.spec.js:34:3 › reduced motion › nothing moves and nothing loops (8.4s)

2 passed (23.0s)

Try it yourself

1
Take away the pause control
In the fixed panel delete the data-pause-motion line from the HTML and the script lines that use pause. autoplay: FAIL span.badge returns: the pulse starts by itself and never ends.

Code & diagrams

Audit: the broken panel

The driver clicks Charge, then runs the audit with one leak test (Sparkle, then Clear). The audit reads real animations, so the output does not depend on timing.

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

layout: FAIL #fill:width
reduced-motion: skipped (run again with reduced motion on)
autoplay: FAIL span.badge
interrupts: skipped (none declared)
leaks: FAIL sparkle (1 animations, 0 loops left)
AUDIT FAILED

Audit: the fixed panel

The same driver on the fixed page. Switch on Reduced motion and replay to see the second rule run.

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

layout: PASS
reduced-motion: skipped (run again with reduced motion on)
autoplay: PASS
interrupts: skipped (none declared)
leaks: PASS
AUDIT PASSED

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

Declare no leak test

In the broken panel's driver, delete the leaks: [...] option.

terminal

$ Run the example

── what you'll see ──

leaks: skipped (none declared)

AUDIT FAILED

Real output: the other failures remain and the leak is no longer caught.

Myth vs fact

Myth

A green audit means the motion is good.

Fact

It means five checks passed. Taste, timing and meaning still need people (Topics 2.1 and 19.2).

Remember this

1
The problem this solves: Tomás wants yes or no, and every opinion differs. A script that prints PASS or FAIL per rule gives one answer that is the same on every build.
2
How it watches. installAudit() runs before the site's code. It wraps Element.prototype.animate, listens for animationstart and transitionrun, and wraps requestAnimationFrame to count callbacks not yet run. It remembers every animation and whether it began before the visitor touched anything.
3
The five rules. (1) Layout: any animated property in the layout families of Topic 6.2's table (width, top, margin, grid tracks...) fails. (2) Reduced motion: only a reduced run can judge it, so it prints skipped otherwise; in a reduced run a transform, translate, rotate or scale that really changes, or anything that loops, fails. (3) Autoplay: an animation that started by itself with activeDuration over 5000 ms (endless counts) needs #motion-toggle or [data-pause-motion]. (4) Interrupts: the page declares a gesture; the audit samples the element every frame and fails on a jump. (5) Leaks: the page declares a mount and a removal; any new animation or pending frame callback afterwards is a leak.
4
What it cannot see. Motion written by setting style.left leaves no animation to find. Rules 4 and 5 test only the gestures you declare. Whether motion sits beside other content or is essential is a human call.

Explain it without notes

Why can the audit not decide the autoplay rule alone?

How does the leak rule work, and what does it miss?

Practice

Add a leak test for a new part to tests/audit.spec.js.

Make rule 1 also fail more than 8 animated grid-template-rows at once. Where do you change the audit?

Done when you can

You can name the five rules and what each one watches
You can say what the audit cannot see
You can declare an interrupt and a leak test for a new part
You have seen the audit fail and then pass