This studio likes motion. There is a canvas animation on our own homepage. So take this as a confession rather than a lecture: most of the animation we shipped in our first years was costing our clients money.
Not the decorative kind. The kind that sits on the path — a reveal before the form appears, a 400 ms modal, a scroll-triggered fade between the reader and the button they came to press.
What we measure now
Before and after any motion work we log time-to-first-interaction on the primary CTA — not page load, but how long from arrival until the visitor can actually act. Two rules came out of it and we have not broken them since.
- Nothing animates between the user and the primary action. Forms, buttons and pricing appear. They do not arrive.
- Feedback animation stays under 200 ms; transitions under 300 ms. Anything slower gets a reason written down next to it.
Animation is free when it runs alongside the user and expensive the moment it runs in front of them.
Scroll reveals deserve a special mention
Fade-in-on-scroll is the most-copied effect on the web and the easiest to get wrong. Two failure modes we see constantly: content that never appears because the observer never fires on a fast scroll, and reveals applied to text a visitor is actively trying to read.
Our rule is that a reveal may run once, must complete under 800 ms, and must never gate something the visitor scrolled specifically to find.
The accessibility part is not optional
Motion is not merely an aesthetic preference for everyone. Parallax and large-scale movement can trigger nausea and dizziness in people with vestibular disorders. Every operating system now exposes a "reduce motion" setting, and honouring it takes one media query.
If your site ignores `prefers-reduced-motion`, some share of visitors are closing the tab for reasons your analytics will never explain.