Waabi Scroll Animation
What it does
Hero pinned for 3.5 viewport heights with Lenis smooth scroll and a scrubbed ScrollTrigger whose progress is mapped manually: the header slides up, the copy is revealed word by word via SplitText then fades out, and the fullscreen hero image shrinks into a 150px rounded card. A following section parallax-scrolls four image columns upward at different speeds.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger, SplitText |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Waabi Scroll Animation — Pinned Hero with Manual Progress Mapping + Parallax Columns
## Goal
Build a scroll-driven hero that is **pinned for 3.5 viewport heights** while a single scrubbed `ScrollTrigger`'s `progress` is **mapped by hand** into four sequential phases: a centered heading **slides up out of frame**, a supporting line **reveals word-by-word** (SplitText) then **fades out**, and the **full-screen hero image shrinks into a tiny 150 px rounded card** anchored at screen center. After the hero unpins, a following section **parallax-scrolls four columns of small square thumbnails upward at two different speeds**. Smooth scroll via Lenis. The star effect is the single manually-mapped pinned ScrollTrigger driving all four hero phases off one `progress` value.
## Tech
Vanilla HTML/CSS/JS with ES module imports, fresh Vite project. Install and import from npm:
- **`gsap`** (3.x) plus the plugins **`ScrollTrigger`** and **`SplitText`**.
- **`lenis`** — smooth scroll.
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
import Lenis from "lenis";
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.