# Draggable Card Stack
> Swipeable card deck powered by Draggable and InertiaPlugin. Throw the top card to send it to the back; momentum decides dismiss or spring-back, and the rest of the page follows whichever card is on top.
Canonical: https://gsapvault.com/effects/draggable-card-stack
Live demo: https://gsapvault.com/demos/draggable-card-stack/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | Draggable, InertiaPlugin |
| Techniques | draggable, momentum, 3d-transforms, stagger |
| Uses Lenis | No |
## Overview
A swipeable card deck built on GSAP's Draggable and InertiaPlugin. Drag the top card and release: a hard flick or a drag past the threshold throws it off-screen and recycles it to the back of the pile, while a gentle release springs it back with an elastic snap. Cards behind scale and slide forward in real time as the top card leaves. The deck also publishes which card is on top: headings, notes and index rows elsewhere on the page bind to it by attribute, or you can listen for a cardstack:change event, so a deck can drive a whole layout rather than sitting in a box on its own. Prev/next buttons run the same animations for keyboard users.
## Features
- Momentum-aware dismissal: InertiaPlugin velocity tracking decides throw vs spring-back
- Infinite recycling: dismissed cards return to the bottom of the pile
- Live drag feedback: top card tilts with drag distance while the next card scales up in preview
- Elastic snap-back for releases that do not pass the distance or velocity threshold
- Bindings that follow the top card: data-stack-title, data-stack-note and data-stack-item
- A cardstack:change event carrying index, total, card and title for anything else on the page
- Configurable stack depth, offset, scale step, and thresholds via data attributes
- Prev/next button controls that mirror the swipe animations for keyboard access
- ARIA live region announces the current card and position to screen readers
- Reduced-motion mode swaps cards instantly with no animation and no dragging
## Use Cases
- Travel, tour or itinerary pickers where the page copy changes with the card
- Testimonial decks that invite interaction instead of auto-rotating
- Product or plan highlights on landing pages that reward exploration
- Team member or speaker cards for event and agency sites
- Onboarding tip sequences users can flick through at their own pace
## 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 and laid out by depth with gsap.set, using y offset, scale and z-index to build the pile. Draggable.create with inertia: true tracks pointer velocity; on release, InertiaPlugin.getVelocity and the drag distance decide between a dismissal tween that flies the card off-screen and an elastic.out snap-back. Dismissed cards are re-appended to the internal order array and the pile re-layouts with staggered gsap.to tweens. Every layout ends in one announce step that writes the counter and live region, updates any bound elements, and dispatches cardstack:change, so the deck stays the single source for what is on top. Buttons call the same dismiss and restore routines, so keyboard and pointer users see identical motion.
## 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 the effect HTML to your ``:**
```html
First card
Card copy goes here.
```
The controls and status elements are optional but recommended: they provide the keyboard and screen reader path. They must be siblings of `.card-stack` inside the same wrapper.
### Options
Set these as data attributes on the `.card-stack` element.
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-enabled` | `true`, `false` | `true` | Enable/disable the effect |
| `data-max-visible` | `2`-`6` | `4` | Cards visible in the fanned pile |
| `data-offset` | Any number | `18` | Vertical gap (px) between stacked cards |
| `data-scale-step` | `0.02`-`0.12` | `0.06` | Scale reduction per card of depth |
| `data-threshold` | `0.2`-`0.8` | `0.4` | Drag distance to dismiss, as a fraction of card width |
| `data-velocity` | Any number | `700` | Release velocity (px/s) that dismisses regardless of distance |
Each `.stack-card` can set `data-title` for the screen reader announcement ("Kyoto in Autumn, card 1 of 6"), and `data-note` for a longer line picked up by `[data-stack-note]`. Give the `.card-stack` an `id` if anything on the page targets it.
### Accessibility
This effect is fully accessible:
- **Reduced motion**: With `prefers-reduced-motion: reduce`, dragging is disabled and the prev/next buttons swap cards instantly with no animation
- **Keyboard navigation**: The prev/next buttons drive the exact same dismiss and restore animations as swiping
- **Screen readers**: An `aria-live` status region announces the current card title and position after every change
- **Semantic HTML**: Controls are real `
