Capsules Animated Sticky Columns
What it does
A pinned full-screen section where four rounded 'capsule' columns swap in place as you scroll. A single ScrollTrigger pins the section over 5x viewport height (Lenis-smoothed) while a second ScrollTrigger watches progress and, at the 0.33 and 0.66 thresholds, fires phased gsap.to tweens that slide columns in from X/Y offsets, fade/scale the previous column out, grow a clip-path reveal on an image, and swap SplitText line spans between two stacked text blocks. Scrolling back reverses each phase.
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.
# Capsules Animated Sticky Columns — scroll-pinned phased column swap
## Goal
Build a full-page scroll experience with a pinned full-screen section containing four rounded "capsule" columns (two text capsules, two image capsules). As the user scrolls through the pinned section, the columns swap in two discrete phases: new capsules slide in from the right/bottom while the previous one fades and scales away, an image is revealed with a growing clip-path wipe, and a text block swaps via SplitText line masks. Scrolling back up reverses each phase.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins `ScrollTrigger` and `SplitText`, and `lenis` (npm) for smooth scrolling. Everything runs inside a `DOMContentLoaded` listener. Register plugins with `gsap.registerPlugin(ScrollTrigger, SplitText)`.
Lenis wiring (exact pattern):
- `const lenis = new Lenis()` (default options).
- `lenis.on("scroll", ScrollTrigger.update)`.
- `gsap.ticker.add((time) => lenis.raf(time * 1000))`.
- `gsap.ticker.lagSmoothing(0)`.
## Layout / HTML
Three sections, each `100vw` × `100svh`:
…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.