Back to Gallery
Draggable Card Stack
£5 Standard License Unlimited projects
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.
About This Effect
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.
What's Included
- 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
Perfect For
- 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
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.
Plugins Draggable, InertiaPlugin
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
