Scroll Stack Cards
Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck.
About This Effect
A scroll-stacking card effect that builds a visible deck instead of scrolling content past. Each panel rides up from below a pinned frame, overshoots its resting line by a few pixels and locks, while every card already down slides back a notch, scales, dims and leans away one level at a time.
All of it comes off a single scrubbed ScrollTrigger timeline, so the whole deck is scrubbable in both directions with no state to keep in sync. Scroll velocity adds a second layer: a hard wheel flick tips the entire pile back, drags it behind the gesture and squashes it, then springs it level again.
A corner chip counts the cards as they lock, and every distance is measured through functions with invalidateOnRefresh so a resize or a mobile address bar re-fits the deck rather than drifting.
What's Included
- Builds a visible deck of panels in one pinned section, driven entirely by scroll position
- Locking overshoot on every arrival: the card rides a few pixels past its resting line, then relaxes onto it
- Depth compression staggered level by level, so the pile settles like a stack of cards rather than one block
- Three depth channels off one number: scale step, dim overlay and a backward lean per level of depth
- Velocity lean that tips, drags and squashes the whole deck on a fast flick, eased through gsap.quickTo and always released back to level
- Live counter and progress rail fed from the scrubbed timeline, so the count flips on the frame a card visibly locks
- Depth cap and reduced offsets on coarse pointers, so five cards still read as a deck at 375px
- Reduced motion and no-JS both fall back to the plain vertical column the markup already is, with nothing hidden
- Configurable through data attributes: peek offset, scale step, dim step, depth cap, scroll length, velocity lean on or off
- Pins below a fixed page bar by measuring it live, and re-measures every distance on ScrollTrigger refresh
Perfect For
- Product feature walkthroughs where each panel needs to be read, not scrolled past
- Agency service or process sections that should feel like a deck being dealt
- Pricing or plan comparisons that build up rather than sitting side by side
- Case-study chapters on a portfolio page, one pinned section per project
- Onboarding or how-it-works steps that stay visible as the next one arrives
How It Works
One ScrollTrigger pins the frame and scrubs a single GSAP timeline that spends one unit of timeline time per arriving card. The arriving panel gets a fromTo from below the frame to a few pixels past its resting line (power2.out), followed by a short relax onto the line; the cards beneath get their depth values as explicit from/to pairs with a stagger, so a mid-scroll resize cannot re-record the deck's start state.
Every distance is a function value with invalidateOnRefresh, so the off-frame start position and the pin length are re-measured rather than cached. Depth is clamped so cards deeper than the cap freeze in place and the deck cannot outgrow a short viewport.
Scroll velocity from getVelocity() is clamped, mapped to degrees and pushed through gsap.quickTo with a back.out ease, driving rotationX, a y drag and a scaleY squash on the deck from one value; a ticker watchdog releases it back to zero once scrolling stops. The counter and rail read the timeline's own onUpdate rather than the scroll handler, so they track the scrubbed visual state instead of the raw wheel.