Website animation best practices, in one rule
Direction. A panel that slides in from the right has told you where it came from and where it will go when you dismiss it. The visitor now has a mental model of the interface, built without a word of explanation. Some tools make this cheaper to build than others, which is half of the Webflow and Framer question.
Cause and effect. A click that produces a visible consequence within about a tenth of a second reads as responsive. The same click with no acknowledgement reads as broken, and the visitor clicks again.
Hierarchy. When several things appear, the order they arrive in says which matters. Everything arriving at once says nothing at all. It is the hero's job restated in time rather than in space.
State. Loading, empty, error and success are the moments a visitor is most likely to leave, and they are usually the least designed. Motion here is not decoration, it is the difference between “working” and “stuck”.
Motion that just costs time
The entrance animation on every section. The first one is a flourish. By the fourth, the visitor is waiting for content that has already loaded, and you have added latency that does not exist — while the real latency is somewhere else entirely.
Scroll-jacking. Taking over the scroll wheel is taking the one control the visitor is certain about. It can be worth it (the Broz homepage spends its whole hero on one enormous sentence with project thumbnails drifting behind the letterforms) but it has to buy something. Usually it does not.
Anything over about half a second that the visitor did not ask for. Delight has a short half-life and a long tail of annoyance on the second visit.
The reduced-motion question
A meaningful share of people have reduced motion switched on at the operating-system level. For some it is a preference; for others, large motion causes genuine nausea. It is the same conversation as the rest of accessibility: the same decisions, made with one more person in mind.
The lazy answer is to disable everything and ship a site that feels broken. The right answer is to decide, per animation, what it was communicating and how to say that without movement, usually a state change instead of a transition.
It is a design decision, which means it belongs in the design file rather than being discovered as a checkbox at the end of the build.
Questions we get asked
Does animation hurt website performance?
Movement built on transform and opacity is close to free. Movement that changes width, height or position forces a re-measure on every frame, and that is where a mid-range phone loses its smoothness. The cost is in what you animate, not in whether you animate.
How long should a website animation be?
Interface feedback under about a tenth of a second, transitions between two hundred and four hundred milliseconds, and almost nothing the visitor did not ask for over half a second. Delight has a short half-life and a long tail of annoyance on the second visit.
Should I disable animation for prefers-reduced-motion?
Not disable — translate. Work out what each animation was communicating and say it another way, usually a state change instead of a transition. Switching everything off ships a site that feels broken to the people the setting exists for.