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.
About This Effect
A swipeable card deck built on GSAP's Draggable and InertiaPlugin. Drag the top card in any direction and release: a hard flick or a drag past the threshold throws the card off-screen and recycles it to the back of the pile, while a gentle release springs it back with an elastic snap. The cards behind scale and slide forward in real time as the top card leaves, so the stack always feels alive. Prev/next buttons drive the same animations for keyboard users, with card position announced to screen readers.
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
- 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
- Testimonial decks that invite interaction instead of auto-rotating
- Travel or portfolio photo stacks with a tactile, physical feel
- Product highlight cards 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 whole pile re-layouts with staggered gsap.to tweens. Buttons call the same dismiss and restore routines, so keyboard and pointer users see identical motion.