# Elastic Stack Cards > 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. Canonical: https://gsapvault.com/effects/elastic-stack-cards Live demo: https://gsapvault.com/demos/elastic-stack-cards/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | hover-effect, stagger, scroll-reveal, scrub, 3d-transforms | | Uses Lenis | Yes | ## Overview 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before closing `` tag:** ```html ``` **3. Add to your ``:** ```html

Research

Short supporting line.

Discovery

``` Buttons elsewhere on the page can drive it by pointing `data-target` at the deck's id: ```html ``` ### Options #### On the `.elastic-stack` | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-elastic-hover` | — | — | Enables the hover / focus / tap fan | | `data-elastic-scroll` | — | — | Enables the scroll-scrubbed variant instead (needs ScrollTrigger) | | `data-fan-mode` | `spread`, `arc`, `cascade` | `spread` | Which shape the deck fans into | | `id` | any | — | Required only if external controls target this deck | #### Fan shapes | Mode | Shape | |------|-------| | `spread` | Even horizontal fan, ends lifted, gentle outward tilt | | `arc` | Same width, ends dropped along a curve with a stronger tilt and slight scale-down | | `cascade` | Same width, laddered diagonally from top-left to bottom-right at a constant tilt | All three use the same horizontal travel, so the amount of each card left showing does not change when you switch shapes. #### External controls | Attribute | Element | Description | |-----------|---------|-------------| | `data-fan-mode-control` | `