01When animation helps
| Job | Example | Why it helps |
|---|---|---|
| Feedback | A button that responds when pressed | Confirms the click registered |
| Continuity | A panel sliding open from where you clicked | Shows where things came from |
| Attention | A subtle highlight on a new notification | Draws the eye to what changed |
| Explanation | A short loop showing a product in use | Shows faster than words can tell |
| Delight, sparingly | A small, quick flourish on success | Adds personality without cost |
02When animation hurts
Animation hurts when it gets between the visitor and the content: intro sequences, text that fades in slowly as you scroll, scroll-jacking that changes how scrolling works, and heavy effects that make the page stutter on mid-range phones. It also hurts people with vestibular disorders, for whom large motion can cause dizziness or nausea.
- Content hidden until an animation finishes.
- Scroll-triggered fades on every paragraph.
- Parallax and large zoom effects on long pages.
- Autoplaying motion that cannot be paused.
- Animations that cause layout shifts or jank on phones.
03Accessibility: reduced motion
Operating systems let people ask for less motion, and websites can read that setting through the CSS prefers-reduced-motion media query, described in MDN's documentation. The W3C's guidance on animation from interactions explains why motion triggered by interaction should be possible to disable unless it is essential.
In practice: when reduced motion is requested, replace movement with simple fades or instant changes, and stop decorative loops.
04Performance: animate the cheap properties
Browsers can animate some properties far more cheaply than others. Google's guide to high-performance animations recommends sticking to transform and opacity, which the browser can usually handle without recalculating layout, and avoiding animating properties like width, height or top. Expensive animations drop frames on phones and can slow the whole page.
- 1Animate transform and opacityMove, scale and fade instead of resizing or repositioning with layout properties.
- 2Keep it shortInterface transitions of a few hundred milliseconds feel responsive; longer feels sluggish.
- 3Do not block contentShow text immediately and animate secondary elements.
- 4Test on a real phoneSmooth on a laptop can mean stutter on a mid-range Android.
05A quick audit of your site's motion
Load your homepage on a phone and watch it for ten seconds without touching anything. Anything that moves should be either responding to you or explaining something; anything else is a candidate for removal. Then turn on reduced motion in your phone's accessibility settings and reload: content should still appear and work. Finally, scroll quickly to the bottom: if text is still fading in as you arrive, it is slowing readers down.
- Remove motion that does not explain or respond.
- Check the page with reduced motion turned on.
- Make sure fast scrolling never shows blank, still-animating sections.
06Choosing a tool
CSS transitions handle most interface motion. For complex sequences and scroll-driven effects, libraries such as GSAP and Motion (formerly Framer Motion) are the common choices; GSAP vs Framer Motion compares them. Whatever the tool, the rules above matter more than the library.
For inspiration that uses motion well, best website design inspiration sites lists galleries, with a warning about the heavy award-site style, and web design trends in 2026 covers which motion trends are worth following.
What people who tried it say
Hacker News commenters are generally skeptical of heavy web animation, criticizing slow award-style sites and libraries used where CSS would do, while appreciating subtle, fast interface motion.
- Webflow makes GSAP 100% freeHacker News
In a thread about GSAP becoming free, commenters debate when an animation library is needed at all versus CSS or the Web Animations API, and recommend alternatives like Motion.
Looking for more first-hand opinions? Search Reddit for “are website animations good”. We link the live threads rather than summarizing them, so you read them in full.
Our take
if you removed an animation and nobody would notice anything missing except the motion, remove it. The animations worth keeping are the ones that explain something.
Where this falls short
Good motion design is partly taste and brand; some brands rightly use more motion than these guidelines suggest. Performance depends on device, browser and implementation, so test rather than assume.
Orlume's Dream Mode builds animated sections, such as a bento grid with an embedded product video, where motion explains the product; the rest of the site stays fast and calm.
Free to start · No card required · Live in one click
Sources
- 1.prefers-reduced-motion · MDN Web Docs
- 2.Understanding Success Criterion 2.3.3: Animation from Interactions · W3C
- 3.How to create high-performance CSS animations · web.dev (Google)
Researched and written by the Orlume team · Updated October 2026
Still stuck?