Ahmed, Founder, DuskLX · · 7 min read
There is a version of the animated website that everyone has suffered through. You scroll, and something flies in from the left. You scroll again, and a number counts up for no reason. You scroll a third time and the page hijacks your wheel, scrubbing through a video at half the speed you intended. By the time you reach the content, you are exhausted and you have learned nothing about the company. That is the circus, and it is a failure of intent, not of technology.
Scroll animation done well does the opposite. It directs attention, reinforces hierarchy, and makes a page feel considered. The user barely notices the motion. They just feel that the site is good. Getting there is mostly a matter of discipline.
Before I animate anything, it has to justify itself with one of a small number of reasons:
- Direct attention. Reveal a headline a beat before its supporting text, and the eye knows where to land first.
- Explain a relationship. Animate a transition so the user understands that this thing became that thing, rather than teleporting.
- Reward progress. A subtle shift as a section enters the viewport tells the user they are moving through something built with care.
If an animation does not do one of these jobs, it is decoration, and decoration that moves is decoration that annoys. Cut it.
The single fastest way to lose a visitor is to take control of their scroll. Scroll-jacking, where the page overrides the user's input to force a cinematic sequence, feels clever in a demo and hostile in real life. People scroll at different speeds for different reasons. Some are skimming. Some have motion sensitivity. Some are just trying to find your pricing.
If you must scrub an animation to scroll position, keep it short, keep it skippable, and never trap the user inside it. The scroll bar belongs to them.
A beautiful animation that drops frames is an ugly animation. Motion lives or dies on a steady frame rate, which means animating the cheap properties (transform and opacity) and leaving the expensive ones alone. Animating layout properties like width, height, or top forces the browser to recalculate the page on every frame, and the result stutters on exactly the mid-range phone most of your audience is holding.
Test on a real, unimpressive device. Not your workstation. If it is smooth on a three-year-old phone, it is smooth everywhere.
Some people have told their operating system they do not want animation. Respecting the reduced-motion preference is the baseline, not optional politeness. Build the site so it is fully functional and still elegant with motion stripped out. If the experience collapses without animation, the animation was holding up something that should have been solid on its own.
Watch someone use the site without telling them to look at anything. If they move through it smoothly, find what they came for, and describe the brand afterward as 'polished' or 'premium' without mentioning a single animation, the motion did its job. The moment someone says 'cool animations,' you have a circus. The goal is a feeling, not a spectacle. Motion should make the content land harder, then get out of the way.
Have a project in mind?
Tell us what you're building. We'll send a custom proposal within 24 hours.
Start a Quote