The best animated websites examples are not a list of links to admire. They are a handful of repeatable motion patterns: a cursor-reactive hero, a product that turns as you scroll, headlines that reveal line by line, sections that pin while a story plays out. Learn the patterns and you can judge any inspiration site in seconds.
Here are 15, grouped by where they live on the page, each with when it helps and when it hurts.
Hero patterns
1. Cursor-reactive hero. The background, type or object leans toward the pointer. Helps: makes a first screen feel alive in two seconds. Hurts: on touch devices there is no cursor, so you need a fallback (gyroscope, gentle idle motion, or a static frame).
2. 3D object hero. A real-time product or sculpture you can rotate. Helps: product brands where shape and material sell. Hurts: if the 3D bundle blocks the first paint. Render a poster image first, then boot the 3D.
3. Intro sequence or preloader. A short branded animation before the site appears. Helps: only when it covers a genuinely heavy load. Hurts: almost always otherwise. We'd skip it.
Scroll patterns
4. Scroll-scrubbed product. An image sequence or video tied to scroll position, so the product assembles, opens or rotates as you move. Helps: explaining how something works without a video player. Hurts: long image sequences get heavy fast; budget the frames.
5. Sticky story (pinned section). One panel stays fixed while text or visuals change beside it. Helps: step-by-step stories, feature walkthroughs, timelines. We go deeper in scrollytelling website examples. Hurts: when pinned too long, users feel trapped.
6. Parallax layers. Foreground and background move at different speeds. Helps: adding depth to flat photography. Hurts: WCAG's Animation from Interactions guidance names parallax as a common trigger for people with vestibular disorders. Turn it off under reduced motion.
7. Horizontal scroll section. Vertical scroll drives a sideways track. Helps: galleries and product lineups. Hurts: disorienting without a visible progress cue.
8. Clip-path and mask reveals. Images wipe in through shapes rather than fading. Helps: editorial, fashion, architecture. Hurts: if every image does it, nothing feels special.
Type patterns
9. Split-text reveal. Headlines enter by line, word or character. Helps: pacing a strong message. Hurts: when the headline starts invisible and waits on JavaScript, which can push back your Largest Contentful Paint (Chrome ignores elements at opacity 0 as LCP candidates until they appear).
10. Kinetic type and marquees. Large type that scrolls, stretches or loops. Helps: loud brands, launches, event sites. Hurts: WCAG 2.2.2 requires a pause, stop or hide mechanism for auto-moving content that lasts more than five seconds alongside other content.
11. Number tick-ups. Stats count up when they enter view. Helps: one or two hero numbers. Hurts: a grid of twelve counters is noise.
Navigation and hover patterns
12. Page transitions. The old page dissolves or morphs into the new one instead of a white flash. Helps: making a multi-page site feel like one object. The browser-native View Transition API now covers navigations between separate pages, not just single-page apps, though browser support still varies. Hurts: transitions longer than half a second make navigation feel slow.
13. Hover previews. Hovering a project title shows an image or video following the cursor. Helps: portfolios, case lists, collections. Hurts: hidden on touch; the list still has to work without it.
14. Magnetic buttons and micro-interactions. CTAs that pull toward the cursor, add-to-cart buttons that confirm with a small bounce. Helps: confirming the click landed. Hurts: when the effect delays the action.
15. Smooth scroll. Libraries like Lenis interpolate wheel scrolling for a softer feel. Helps: keeping heavy scroll choreography in sync. Hurts: when it fights native scroll on phones or breaks anchor links.
Quick reference: pattern vs risk
| Pattern | Best for | Main risk | Cost level |
|---|---|---|---|
| Cursor-reactive hero | Brand first impression | No cursor on mobile | Medium |
| 3D object hero | Product brands | Slow first paint | High |
| Scroll-scrubbed product | Explaining mechanics | Asset weight | Medium-High |
| Sticky story | Feature walkthroughs | Feeling trapped | Medium |
| Split-text reveal | Headlines | Delayed LCP | Low |
| Page transitions | Multi-page coherence | Slow navigation | Medium |
| Hover previews | Portfolios, collections | Invisible on touch | Low |
How to steal a pattern properly
Copying the effect is easy. The timing is what makes it feel expensive.
Nielsen Norman Group recommends most UI animations fall in the 100-500 ms range, around 100 ms for simple feedback and 200-300 ms for larger changes, and suggests ease-out for elements coming to rest. Scroll-driven sequences are the exception: the user controls the clock.
Three rules we apply when borrowing from animated website design we admire:
- One hero pattern per page. Pair a loud hero with quiet sections.
- Same easing family everywhere. Mixed curves make a site feel assembled from parts.
- Every pattern needs a reduced-motion version. Not off; calmer.
If you want patterns people can touch rather than watch, see interactive website design.
