Skip to content
tileio

Menu

12 layers · 5 free

Scroll animation examples you can copy into a website

Scroll animation works when the scroll bar becomes a control: the visitor moves the story at their own pace, and scrolling back plays it in reverse. Every section here ties its motion to scroll position rather than to a timer, so nothing runs ahead of the reader.

There are three families. Scrubbed media: a hero that plays a sunrise frame by frame and a launch film you play with the wheel. Pinned layouts: a horizontal project wall, a roadmap driven sideways, a phone mockup that holds still while feature steps pass. Progress pieces: cards that stack, a helix that turns to each year, a glass tube that fills with liquid, photo columns at three speeds.

Each is a self-contained block in vanilla JS. Tune it, then copy it as a prompt for a plain HTML snippet or a Next.js, React, Vue, Astro, WordPress, Shopify or Webflow component.

The 12 layers, in order

  1. A pinned hero that plays like a video under your scroll: dawn breaks over a valley frame by frame.

  2. A trail-shoe launch film you play with the scroll wheel while the frame stays pinned.

  3. The right half stays pinned and crossfades while three short chapters scroll past on the left.

  4. An architecture practice's projects on one long wall that slides sideways as you scroll down.

  5. A product roadmap pinned to the screen while vertical scrolling drives the quarters sideways.

  6. A phone mockup that holds still while four feature steps scroll past and swap its screen.

  7. Five full-width cards that stick to the top, each new one sliding over the last.

  8. A company history wound around a 3D helix that turns each year to face you as you scroll.

  9. A glass tube across the page that fills with liquid as you read, its front edge wobbling.

  10. A bike share's day in eight moments while a sticky dashboard's clock and counters keep pace.

  11. Four steps scroll on the left while a pinned device frame swaps screens on the right.

  12. A florist's stems in three photo columns that drift at different speeds.

Browse the full catalogue: Sections

Questions

What is a scroll-driven animation?

Motion whose progress is tied to how far the page has scrolled instead of to time. Scroll down and it advances, scroll up and it rewinds. Pinning (holding a section in place while its contents change) is the most common technique.

Do these need GSAP?

No. The sections are vanilla JavaScript with no animation library, so they drop into any page. The full-page templates use GSAP ScrollTrigger; see the GSAP templates collection for those.

Are scroll animations bad for accessibility?

They can be. Almost every section here checks prefers-reduced-motion and falls back to a static layout; all keep their content as real text and leave keyboard scrolling working.

Which ones are free?

Split Hero, Scroll-pinned Phone Features, Stacking Cards, Counter Narrative and Sticky Steps. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections