Back to Gallery
Elastic Stack Cards
£5 Standard License Unlimited projects
Stacked cards that spring open into a fan. Three fan shapes, opened by hover, focus, tap or an external button, with click-to-front card selection.
About This Effect
A capability deck that rests as a tight pile and springs into a full-width fan on hover, focus or tap. Three fan shapes ship with it — an even spread, a curved arc, and a diagonal cascade — switchable at runtime from any button on the page, and the deck can be held open by an external toggle instead of a hover. Clicking a fanned card lifts it clear of its neighbours and flips it to the accent colour. Spacing is measured from the container at fan time, so the same markup fills a wide desktop stage and closes to a hand of cards on a phone. An optional scroll-scrubbed variant drives the identical layout from scroll position instead.
What's Included
- Three fan shapes — spread, arc and cascade — set with data-fan-mode and switchable at runtime
- External controls: [data-fan-mode-control] buttons pick the shape, [data-fan-toggle] holds the deck open
- Spring physics via GSAP elastic easing, with per-card stagger out from the centre
- Click-to-front selection that lifts the card clear and flips it to the accent colour
- Fan width measured from the container, so end cards never overflow their stage
- Optional scroll-scrubbed variant that fans the same markup from scroll position
- Hover, keyboard focus and touch tap all open the deck
- Reduced-motion fallback lays every card out as a plain, readable grid
Perfect For
- Service or capability decks on agency and studio sites
- Process steps that fan out from a single pile
- Pricing or plan cards that stay compact until someone looks at them
- Portfolio project stacks with a tactile, physical reveal
- Feature highlights that need to sit in a fixed-height section
How It Works
Cards are absolutely positioned inside a flex-centred container and seated in a resting pile with small offsets, tilt and scale. On hover, focus, tap or an external toggle, the script measures the container and the card, subtracts an allowance for how much wider a tilted card is than its box, and hands the result to the selected shape function, which returns an x, y, rotation and scale per card. Each card animates there with elastic.out and a stagger that grows from the centre of the deck. Clicking a card raises its z-index and tweens it above its fanned position. The scroll variant feeds the same shape functions into a ScrollTrigger timeline with scrub instead of tweening on pointer events.
Plugins ScrollTrigger
Difficulty Intermediate
Smooth Scroll Lenis Integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
