A draggable card stack for Framer that lets users swipe, flick, or navigate through layered content with smooth, elastic motion.
Built for interactive showcases, testimonials, portfolios, or feature highlights.
Displays 2 to 5 visible cards stacked with diagonal X and Y offsets. The top card sits in front while the remaining cards cascade behind it.
The top card is draggable. Pull it past a configurable threshold and it drops off screen. The remaining cards shift forward and a new card fades in from the back of the stack.
The Previous action reverses the sequence. A card animates in from above and the stack reorders smoothly.
Keyboard navigation is supported. Left and Right arrow keys work when the component is in view, activated only when visible in the viewport.
If there are too few children to maintain visual depth, the component duplicates items to preserve the visible stack count plus buffer.
Card transitions use a custom easing curve for controlled motion.
Drag interaction applies elastic resistance for a natural feel.
If the drag threshold is not met, the card snaps back with an elastic easing.
Includes circular Previous and Next buttons with chevron icons. You can upload a custom arrow icon.
Buttons scale slightly on hover for subtle feedback.
Fully responsive. Offsets, control sizes, and spacing adapt to smaller containers.
Adjust directly inside Framer:
X and Y stack offsets
Number of visible cards
Animation duration
Drag threshold
Control visibility
Control size and colors
Custom arrow icon upload
Drop it into any layout and use standard child layers as cards.
Sanna Granqvist
