MaximaTherapy Sticky Cards
What it does
Scroll-pinned hero (700svh of scrub scroll, Lenis-smoothed) where a stack of cards rises into view while the headline exits upward; past the halfway mark the front card 3D-flips with an elastic rotationY to reveal four tilted colored cards, which then get dismissed upward one by one with increasing rotation across staggered progress ranges.
How it's built
| Category | cards |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| 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.
# Sticky Cards — Scroll-Pinned 3D Flip & One-by-One Dismiss
## Goal
Build a full-screen, scroll-pinned hero where a stack of cards rises into view while the headline slides out the top; past the halfway point a single "front" card performs a springy 3D flip to reveal four tilted, colored cards fanned on top of each other, which are then dismissed upward one at a time as you keep scrolling. The star effect is the **elastic 3D card flip driven by a long scrubbed, pinned ScrollTrigger**, combined with a **staggered per-card dismiss** keyed to precise scroll-progress windows.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Build under Vite (npm). Use:
- `gsap` (npm) with the plugin **`ScrollTrigger`** (`gsap/ScrollTrigger`), registered via `gsap.registerPlugin(ScrollTrigger)`.
- `lenis` (npm) for smooth scroll, wired into GSAP's ticker.
- Icon glyphs via the **Ionicons** web component (`ion-icon`) — see **Icons** below for the exact version and where to get it. No raster images are used.
Wire Lenis to GSAP exactly like this:
```js
const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
…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.