Good website motion follows four rules: it has a job (directing attention or giving feedback), it's fast and small (200–500ms, short distances), it plays once (nothing loops next to text), and it respects the reader (mobile and reduced-motion settings included). Apply those, and even generous amounts of animation feel like polish instead of noise.
Everyone has visited a site where the page assembles itself like a deck of thrown cards, and everyone has closed that tab. So most business owners conclude motion is risky and ship a static site — which is its own mistake, because well-placed motion is the cheapest "this business has its act together" signal on the web. The difference between the two outcomes isn't budget. It's taste, and taste compresses into rules.
What motion is actually for
Motion earns its place doing three jobs: directing attention (your eye follows movement — a reveal points at what matters next), giving feedback (a button that responds to hover says "this works, press me"), and signaling care (a page that moves deliberately reads as a business that does things deliberately). Decoration is not on the list. As the motion guide puts it: motion should make a page easier to understand, not harder to read — every animation should survive the question "what does this help the visitor do?"
Every animation has one job
Before adding any motion, name its job out loud: "this reveal walks the visitor down the pricing tiers in order." If the sentence comes out as "it looks cool", cut it. One animated moment per screen of content is a good budget — when everything moves, nothing stands out, and the one thing you wanted to emphasize drowns in the choreography.
Fast and small beats slow and grand
The most common amateur tell is motion that's too slow and travels too far. Interface motion lives between 200 and 500 milliseconds — long enough to perceive, short enough to never wait for. Elements should slide 20–40 pixels, not fly in from off-screen; fade-up a card, don't helicopter it in. If a visitor could consciously watch your animation finish, it's roughly twice too slow — good motion is felt on the first visit and invisible by the third.
Play once, then get out of the way
Entrance effects should run once per element, on first reveal — not re-trigger every time the visitor scrolls back up. And nothing should loop within reading distance of text: the eye is hardwired to check on movement, so a permanently bobbing arrow next to a paragraph taxes every sentence. Looping motion is for isolated hero visuals at most — and even there, slow and subtle.
Respect the reader's device and settings
Motion that's elegant on a desktop can be chaos on a phone — slower hardware, smaller distances, touch instead of hover. Preview on both before publishing, and simplify for mobile when in doubt: fewer moving elements, shorter distances, or no entrance motion at all. And honor the reduced-motion preference users set system-wide — for some visitors animation isn't a taste issue but a vestibular one, and the considerate fallback is content that simply appears.
Good motion is felt on the first visit and invisible by the third.
If visitors can describe your animations, the animations are the problem.
Five patterns, and where they stand
Scroll reveals
earns its placeSections fade up 20–30px as they enter the viewport, ~300ms, slight stagger between cards. The workhorse — it paces a long page like paragraphs pace prose. Once per element, never re-triggering.
Hover and press feedback
earns its placeButtons brighten, cards lift 2–4px, links underline — in ~150–200ms. The highest value-per-millisecond motion on any site, because it's pure feedback. Make sure touch devices get a pressed state instead of relying on hover.
One hero moment
earns its placeA single signature animation where attention lands first — a headline that settles into place, a product visual that responds to the cursor, an illustration that draws itself. This is the "we sweat details" signal. One per site, not one per page.
Count-ups and progress numbers
earns when trueStats that count up as they scroll into view ("1,200 projects completed") borrow motion's attention pull for your proof. Works exactly once per page, and only with numbers worth staring at.
Autoplaying carousels and background video
rarely earns itCarousels advance before anyone finishes reading slide one; background video competes with your own headline and costs the page weight of fifty images. If content matters, give it a static spot. If it doesn't, cut it.
Doing this in practice
On Faster you don't hand-code any of this. Describe the moment in chat — "fade the three pricing cards up one after another as they scroll into view, fast" — and ask AI for motion ideas scoped to your actual page; then fine-tune timing and feel in the visual editor. If a moment works, save it as a reusable motion moment and apply it consistently — consistency is half of what reads as taste. Like every page change, motion previews before it publishes, on both screen sizes.
Key takeaways
- Name the job or cut the motion: attention, feedback, or care — never "looks cool".
- 200–500ms, 20–40px: fast and small reads as confident; slow and grand reads as amateur.
- Once per element, nothing loops near text — movement next to paragraphs taxes every sentence.
- Preview mobile, honor reduced motion — taste includes devices you don't use.
- Budget one hero moment per site and let hover feedback do the daily work.
Frequently asked questions
Does animation hurt my SEO or page speed?
Done right, negligibly — transform/opacity-based motion is cheap for browsers to run. What hurts is heavy media dressed up as motion: background videos and oversized animated images. Judge by the loaded page weight, not by whether things move.
My industry is serious — is motion unprofessional?
Restraint, not absence, is what professional looks like. A law firm with crisp hover feedback and one composed reveal reads as more meticulous than a static page, not less. The four rules scale down gracefully — serious just means a smaller budget.
Where should the hero moment go?
Where the most first-time attention lands — almost always the homepage hero. It's the handshake. Interior pages keep the quieter patterns: reveals, feedback, maybe one count-up on the proof section.
How do I know if I've overdone it?
Scroll the page top to bottom in one motion. If your eye gets pulled sideways more than twice, or anything is still moving when you stop, trim. Better test: watch someone else scroll it — every time they pause for an animation that isn't content, that's a cut.
Can I copy motion I've seen on big-brand sites?
Copy the restraint, not the spectacle. Big brands ship one signature interaction surrounded by acres of calm — visitors remember the calm as quality. Describe the moment you admired in your own words and let the AI adapt it to your page rather than transplanting it.
Motion is seasoning: the right amount disappears into the dish, and you only ever notice too much. Four rules, five patterns, preview on a phone — that's the whole craft at the level a business site needs. The click-by-click lives in the help center.