Swipeable Card Stack
A beautifully animated card stack component that lets users swipe through content with fluid, physics-based interactions. Inspired by popular swipe interfaces, this component brings a polished, native-feeling experience to your Framer projects.
Features
Drag in Any Direction
Unlike traditional sliders, users can drag cards in any direction - left, right, up, or down. When released past the threshold, the card smoothly animates to the back of the stack.
3D Tilt Effects
Cards naturally tilt and rotate as you drag them, creating an immersive, tactile feel. The rotation follows your drag direction and smoothly returns to neutral when the card settles.
Stacked Depth Effect
Cards behind the front one are progressively scaled down and offset, creating a realistic deck-of-cards appearance. Customize how much each card peeks out and how much smaller they get.
Customizable Shadows
Fine-tune the shadow's position, blur, spread, and color to match your design. Create subtle depth or dramatic floating effects.
Smooth Physics-Based Animations
Every interaction uses spring physics for natural, fluid motion. Cards maintain momentum when flicked and settle with satisfying easing.
How to Use
- Drag the component onto your canvas
- Connect your frames or components to the "Cards" slot
- Customize the appearance and behavior using the property controls
Property Controls
Stack Appearance
| Property | Description |
|---|---|
| Stack Offset | How much each card peeks out behind the one in front |
| Scale Step | How much smaller each card gets toward the back |
| Visible Cards | Maximum cards shown in the stack at once |
| Border Radius | Rounded corners for all cards |
| Perspective | 3D depth intensity (lower = more dramatic) |
Shadow
| Property | Description |
|---|---|
| Shadow X/Y | Horizontal and vertical offset |
| Shadow Blur | How soft the shadow appears |
| Shadow Spread | Shadow size (negative = tighter, positive = larger) |
| Shadow Color | Color with transparency |
Interaction
| Property | Description |
|---|---|
| Swipe Distance | How far to drag before the card swipes away |
| Swipe Velocity | Quick flick speed that triggers a swipe |
| Drag Elastic | How stretchy the drag feels (0 = stiff, 1 = loose) |
| Rotate on Drag | Enable/disable 3D tilt effect |
| Max Rotation | Maximum tilt angle when dragging |
Behavior
| Property | Description |
|---|---|
| Infinite Loop | Cards cycle endlessly or stop at the last card |
| Transition | Animation style for stack movements |
Perfect For
- Image galleries and portfolios
- Product showcases
- Testimonial carousels
- Onboarding flows
- Card-based games
- Any swipeable content
Notes
- Works with any content: images, text, components, or complex layouts
- Fully responsive - cards maintain their connected frame dimensions
- Touch-friendly for mobile devices
- No external dependencies
Refund Policy
At Duopixel, we want you to feel confident when purchasing our digital products. All Framer components and templates are crafted with care, tested thoroughly, and updated as Framer evolves.
If something isn’t working as expected, we’re here to help.
Eligibility for Refunds
You may request a refund within 7 days of purchase if:
- You experience a technical issue that prevents the component or template from working as described.
- We are unable to resolve the issue after reasonable troubleshooting.
Non-Refundable Cases
Because our products are fully digital and instantly accessible, refunds are not granted for:
- Accidental purchases
- Change of mind after download
- Misunderstanding of product features when the demo accurately represents them
- Situations where the product is functioning normally
How to Request a Refund
If you run into a problem:
- Email us sduopixel@gmail.com with your order details.
- Describe the issue you are facing.
- We’ll work with you to resolve it.
- If the issue cannot be fixed, we’ll issue a full refund.
Our Commitment
We aim to provide a smooth, reliable experience for every customer. If you ever have questions, need help, or want support customizing a component, don’t hesitate to reach out.
By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.