How do I make draggable, swipeable cards in Webflow without code?

Clone a GSAP Draggable-based component, then structure your cards with the right custom attributes — a wrapper zone, the cards themselves, and a reset button. The included script handles the drag, throw, and reset logic, so you never edit JavaScript.

Can I use draggable cards with Webflow CMS content?

Yes. Build a Collection List with the same attribute structure as the static version, and each Collection Item becomes a card. Since you can''t add combo classes inside a Collection List, use Webflow''s structure selectors (last, odd, even) to give the cards their playful tilt.

Why do thrown cards cause a horizontal scrollbar, and how do I stop it?

When a card is tossed off-screen it moves outside the section's bounds, and the browser tries to scroll to it. Setting overflow: hidden on the section clips anything past the edge, so the card disappears cleanly with no stray scrollbar.

How do I customize the throw distance or rotation of the cards?

Each card reads optional attributes for throw distance, throw rotation, reset duration, easing, and more. Set them on the card element to override the built-in values; leave them off and the sensible defaults (a 1000px throw, a 45° spin) kick in automatically.

Build Draggable Cards in Webflow with GSAP (No Code)

Build a satisfying stack of draggable, throwable cards in Webflow with GSAP — swipe them away, reset the deck, and even wire it up to CMS content.

Build a stack of draggable cards in Webflow that visitors can grab, tilt, and toss off-screen — left or right, like flicking through a pile of instant photos. It’s one of the most satisfying interactions I’ve ever put together, and on your end it’s entirely no-code: GSAP’s Draggable plugin does the heavy lifting, while you drive everything from Webflow’s settings panel with a handful of custom attributes.

The best part is how portable it is. The exact same structure works whether your cards are static or pulled from a CMS collection, so you can drop it into a portfolio, a product showcase, or anywhere you want people to physically play with your content. And because every detail — throw distance, spin, easing — ships with a sensible default, you can publish it as-is and fine-tune later, only if you want to.

How it works

The whole thing is attribute-driven. A single, fully commented script lives in an embed inside a “draggable card script” component. On load (and again on reset) it grabs every element marked FC-draggable-card="wrapper", looks inside for cards marked FC-draggable-card="component", then takes the top card, adds a little hover hint, and initializes its drag behavior. Because the logic reads from attributes, you never open the code — you build the structure in Webflow and label the pieces.

A few structural CSS decisions make it feel right. The section gets overflow: hidden, because a card thrown off-screen technically leaves the section’s bounds — without clipping that, you’d get an ugly horizontal scrollbar or cards poking out of the layout. The card container is position: absolute with all offsets at zero, so it fills its parent; that’s why the parent (the outer wrapper) needs position: relative for it to latch onto. The list wrapper is set to pointer-events: none and each card back to pointer-events: auto — a deliberate pairing, so that once every card has been tossed away, your clicks pass through to the reset button sitting beneath the stack. The playful tilt comes from combo classes (odd cards lean one way, even the other) with the top card left dead center.

The tuning lives in optional attributes on each card: rotation sensitivity, reset duration, throw duration and distance, throw rotation, the drag threshold, the delay before the next card arms, and the GSAP easing. None are required — each one falls back to a sensible default — so you can start with the bare minimum and reach for the configuration reference above only when you want tighter control.

Going to a CMS version changes almost nothing. You swap the static cards for a Collection List and put the same FC-draggable-card attributes on the wrapper, the reset button, and each Collection Item. The one wrinkle: you can’t add manual combo classes like “odd” and “even” inside a Collection List, so instead you use Webflow’s structure selectors — style the last item with no tilt (that’s your top card), even items at one angle, odd items at the other. Two independent stacks on the same page work fine and reset independently.

How to use it

Clone the project. Grab the Webflow cloneable — it includes the full structure, the styling, and the commented draggable card script component. The code is documented at the bottom of the cloned page, with every attribute and its default.
Set up the drag zone. On the outer wrapper that will hold your cards, add position: relative, a height (the demo uses 80vh), and the attribute FC-draggable-card="wrapper". Give the section around it overflow: hidden so thrown cards don’t create a scrollbar.
Layer the stack. Inside the wrapper, place an absolutely-positioned list wrapper (all offsets 0, pointer-events: none) and, inside it, your cards. Each card is position: absolute, pointer-events: auto, and carries FC-draggable-card="component". Add odd/even combo classes for the tilt, leaving the top card centered.
Add the reset button. Drop a real <button> element (change the tag in the settings panel) with the attribute FC-draggable-card="reset". This is what brings the whole deck back.
Activate GSAP + Draggable. As with any GSAP project in Webflow, load GSAP and register the Draggable plugin so the script has what it needs.
Configure the feel (optional). Want a longer throw, a snappier reset, or a different easing? Add any of the FC-draggable-card-* attributes from the configuration reference above to a card — see the GSAP easing reference for the ease values. Leave them off and the defaults handle it.
Go CMS if you need it. To power the cards from a collection, rebuild the same structure with a Collection List, keep the identical attributes, and use structure selectors (last, odd, even) in place of manual combo classes for the tilt.

Attribute	Values	Default	What it does
`FC-draggable-card`	`wrapper · component · reset`	—	The role marker that ties the interaction together. Put "wrapper" on the drag-zone div (it holds the cards and the reset button), "component" on each draggable card, and "reset" on the reset button.
`FC-draggable-card-rotation`	`degrees`	`45`	How sensitive the card's rotation is while you drag it.
`FC-draggable-card-reset-duration`	`seconds`	`2`	How fast a card returns to center when released before crossing the throw threshold.
`FC-draggable-card-throw-duration`	`seconds`	`0.5`	How long a card takes to fly off-screen once thrown.
`FC-draggable-card-throw-distance`	`pixels`	`1000`	How far a thrown card travels off-screen.
`FC-draggable-card-throw-rotation`	`degrees`	`45`	How much a card spins as it is tossed away.
`FC-draggable-card-threshold`	`pixels`	`100`	How far you must drag before release counts as a throw rather than a snap-back.
`FC-draggable-card-delay`	`seconds`	`0`	How long to wait before the next card becomes draggable.
`FC-draggable-card-ease`	`GSAP ease name`	`power4.out`	The easing function used across the whole interaction.

Build Draggable Cards in Webflow with GSAP (No Code)

Key takeaways

Video chapters

How it works

How to use it

Configuration reference

Resources

Frequently asked questions

Also part of these courses