React Scroll Animation Components
Scroll-driven React components — parallax scenes, pinned sections and progress-linked reveals that respond to the user's scroll position. Built on GSAP ScrollTrigger and Motion scroll values.
All 5 scroll animations components
- Hero Cover Reveal — A scroll-driven hero cover reveal — the hero pins in place while the next section slides up and covers it, scrubbed by GSAP ScrollTrigger.
- Footer Reveal — A scroll-driven footer reveal — the footer sits pinned in place while the content above slides up to uncover it. Pure CSS sticky, no JS.
- Stacking Cards Parallax — A scroll-driven stacking card parallax — sticky cards pin and scale down as later cards scroll up over them, building a layered depth stack.
- Text Clip Mask Reveal — A scroll-driven text-clip mask reveal — a video is clipped to the shape of a word, and as you scroll the text-shaped mask scales up until it opens out and uncovers the full frame.
- Fluid Cube Scroll — A scroll-driven 3D cube that slides across the viewport while a GPU fluid simulation masks its colourful faces in under the cursor.