Web Motion That Doesn't Cost You Points: 9 Motion Specs You Can Put in an Acceptance Checklist

Motion Is No Longer a Bonus. It's a Deduction.

Since Google added INP (Interaction to Next Paint) to Core Web Vitals, the delay between a button press and the next paint became a measurable, comparable metric. Meanwhile CSS scroll-driven animations have landed, so scroll-linked effects no longer require JavaScript. The technical barrier dropped; the cost of getting it wrong went up.

On most SMB sites the motion problem isn't "too little" — it's "no spec." The designer says "make it smoother," the front-end dev sets 800ms, and nobody can say who's right. This piece breaks motion down into numbers you can put in an acceptance checklist.

Five Real Cases: How They Actually Did It

Brand / Site	Motion approach	Observable technical trade-off
GitHub homepage globe	three.js WebGL in five layers (halo, globe, land regions, blue spikes = open PRs, pink arcs = merged), no textures, ~12,000 five-sided circles for land	Frame rate is monitored continuously and quality is degraded if FPS drops below 55.5 over the last 50 frames
Stripe homepage gradient	A minimal WebGL layer (minigl) plus a shader for the flowing gradient; the container uses `skewY(-12deg)` and `overflow:hidden` for the signature diagonal edge	Community reverse-engineering shows a ScrollObserver stops the computation once it scrolls out of view
Zomato Lookback 2024	Animations repackaged as dotLottie	Files shrank 60–70%, most under 100KB, with 18.7 million impressions (LottieFiles case study)
Gojek app	Also moved to dotLottie	Animation files 89% smaller, memory stability improved 99.6%
Warby Parker menu	Top and bottom bars rotate into an X while the middle bar fades out	Three elements, two transformations, one gesture

The counter-example: the Google Pixel 4 product page mixes scroll-triggered animation with parallax, and NN/g explicitly flags parallax and scroll jacking as high vestibular risk.

Three Behavioural Reasons Motion Works

1. Animate motion forcibly captures attention. Pratt et al., writing in Psychological Science (2010) in "It's Alive! Animate motion captures visual attention," showed that life-like motion automatically captures visual attention. That cuts both ways: on a CTA it guides, in a sidebar it distracts.

2. 100ms is the threshold for "immediate." NN/g notes that simple feedback such as a checkbox or toggle at roughly 100ms creates the illusion of directly manipulating the object; below 100ms users don't notice anything happened at all.

3. Motion compensates for change blindness. When a screen swaps instantly, the brain misses what changed. A 200–300ms shift or fade says "A became B" rather than "B appeared out of nowhere."

Technical Cost: Hours, File Size, Core Web Vitals

Duration: NN/g recommends 100–500ms for most animations; past 500ms it starts to feel like a drag. My working range is 150–350ms.
Properties: web.dev is explicit that only transform and opacity can be handled by the compositor alone, skipping layout and paint. Animating width, top or box-shadow will drop frames, and Lighthouse flags non-composited animations.
INP: the good threshold is 200ms or less at the 75th percentile. Animation setup inside a click handler counts toward it.
CLS: good is 0.1 or less. "Fade in on scroll" blocks without reserved height are pure layout shift.
Bundle: Motion for React's useAnimate is 2.3KB in mini and 17KB in hybrid; plain CSS transitions are 0KB. dotLottie claims 2–10× smaller than Lottie JSON, but the web ThorVG runtime is roughly 150KB of WASM.
Hours (our quoting experience): tokenising interaction feedback site-wide, 4–6 hours; a custom hero animation tuned across three device classes, 12–20 hours.

Suitable Industries vs Unsuitable Ones

Suitable (motion is an asset)	Unsuitable / needs strict restraint
SaaS and tech products: animation explains product logic better than screenshots	Government and public sector: accessibility compliance outranks visual expression
Luxury, hospitality, F&B: perceived-quality signals affect pricing	Medical booking and emergency information: any extra delay is a risk
Design services and portfolios: motion is itself proof of capability	E-commerce checkout: every extra 100ms leaks conversions

How to Apply It to Your Site: 5 Steps

Measure before you change. Pull current INP and CLS from PageSpeed Insights, then record a real interaction in Chrome DevTools Performance to check for dropped frames. No baseline, no acceptance.
Define three duration tokens. --motion-fast: 120ms (hover, checkbox), --motion-base: 240ms (dropdown, tooltip, card expand), --motion-slow: 400ms (modal, large travel). Use ease-out on entry and ease-in on exit, 50–80ms shorter.
Audit and keep only three categories. State feedback, spatial relationship, and loading placeholders. Delete the rest.
Write the reduced-motion fallback. Not a blanket animation: none — replace movement with a plain opacity fade and freeze looping animations on frame one. That is the approach behind WCAG 2.3.3, and prefers-reduced-motion has been available across browsers since January 2020.
Put it in the acceptance checklist. Reserve space for entry-animation containers with aspect-ratio or min-height; anything auto-playing beyond five seconds needs a pause control (WCAG 2.2.2).

[ ] All durations fall between 120–400ms
[ ] Only transform/opacity animated; no Lighthouse non-composited warning
[ ] Field-tested mobile INP ≤ 200ms and CLS ≤ 0.1
[ ] prefers-reduced-motion: reduce has a real fallback

Three Most Common Mistakes

Whole-page scroll reveal. Every section fades in, so readers are permanently waiting for content, bounce rate rises, and CLS suffers. Fix: apply it only to the first section below the hero and show the rest immediately.
Treating reduced-motion as optional. It is a preference supported across every major browser; skipping it means abandoning vestibular-sensitive users.
GIF loaders, or motion without tokens. A GIF easily hits 500KB and can't have a transparent background; CSS or dotLottie is usually an order of magnitude smaller. And components hardcoding 0.3s / 0.45s / 700ms can never be tuned consistently at redesign time.

My Take

The biggest cost of motion is never the GPU — it's maintenance. Motion with no tokens, no reduced-motion branch, and no line in the acceptance checklist will be quietly commented out within two redesigns. Rather than one showpiece hero animation, standardise the feedback timing of forty interactive components at 120ms.

Further Resources

Motion (motion.dev): React/JS animation library with a full bundle-size reduction guide in the official docs.
LottieFiles dotLottie: vector animation packaging format, with an online Lottie JSON to .lottie converter.
MDN CSS scroll-driven animations: pure-CSS scroll animation; check current support on caniuse and wrap it in @supports as progressive enhancement.

FAQ

Does motion affect SEO?

Not content ranking directly, but indirectly through Core Web Vitals: the usual damage is INP (good threshold 200ms) and CLS (good threshold 0.1). Content hidden by CSS and then faded in is not treated as hidden text, because the text exists in the DOM throughout.

What is a reasonable motion budget for an SMB site?

From our client work: tokenising interaction feedback runs about 4–6 hours; a custom hero animation tuned across three device classes runs about 12–20 hours. Do the former first.

Do I have to use Lottie?

No. A single animated icon is fine in CSS or inline SVG — loading a roughly 150KB ThorVG runtime for it is heavier. Character animation, multi-layer illustration, or a need for identical rendering across platforms is where it pays off.

If a user enables prefers-reduced-motion, is my motion work wasted?

No. The correct approach is to degrade, not disable: keep opacity fades, remove translation and parallax, stop loops. Animation essential to functionality (a progress indicator, for instance) is an exception under WCAG 2.3.3.

Are scroll-driven animations usable now?

Yes, as progressive enhancement. Chrome and Edge support them from 115, recent Safari versions have caught up, and Firefox still sits behind a flag. Wrap it in @supports (animation-timeline: scroll()).

Make Motion an Asset, Not a Liability

Got motion with no spec, or want to add motion without slowing the site down? We can start with a 30-minute motion audit: measure your INP and CLS, flag every non-composited animation, and hand you a duration token table your front-end team can use directly.