BrandAppart Sticky Cards
What it does
Scroll-pinned deck of four stacked cards: as you scroll through the pinned section (8 viewport heights, scrub-synced with Lenis), the front card flies up while tilting back 35deg in 3D perspective, and the cards behind slide forward and scale up to take its place.
How it's built
| Category | cards |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| 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.
# Scroll-Pinned Sticky Cards Deck (3D tilt-off)
## Goal
Build a scroll-driven section that holds a **deck of four stacked cards** pinned in the middle of the viewport. As the user scrolls through the (long) pinned section, the **front card flies straight up while tilting back in 3D perspective (rotationX 0→35deg)**, and the cards stacked behind it **slide forward and scale up** to take the front position — one card handed off per scroll segment, in a continuous scrubbed loop. Smooth scroll via Lenis. There is an intro panel above and an outro panel below the pinned deck.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugin `ScrollTrigger`, and `lenis` (npm) for smooth scroll. No other plugins, no framework — plain Vite-style module imports:
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
```
Register once: `gsap.registerPlugin(ScrollTrigger);`. Wrap all setup in a `DOMContentLoaded` listener.
## Layout / HTML
…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
Learn the technique
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.