Animation that earns its weight
A short test for whether motion belongs on a page or whether it just makes the page heavier.
Animation is cheap to add and expensive to maintain. Bandwidth, accessibility, attention. Every motion has to earn its place.
The test
Would the page work without this animation? If yes, does the animation tell the user something the static page didn't?
If "yes, but" - usually it's a "wow factor" pitch - cut it.
What earns its weight
Loading states. Empty states. Confirmations. Hover affordance on interactive elements. Anything that gives the user information about what just happened or what will happen next.
What doesn't
Decorative scroll-triggered fade-ins on every paragraph. Hero animations that take three seconds to resolve. Cursor-following gradients on a marketing page about saving time.
What we ship by default
prefers-reduced-motion respected on every animation. No animation longer than 600ms outside specific brand moments. Easing curves that look natural - cubic-bezier(0.16, 1, 0.3, 1) covers 80% of cases.
If the animation needs a comment in the code explaining what it's for, it probably shouldn't be there.