Card Stack Carousel
Swipeable or tappable card stack carousel for Framer. Connect your own cards(frames), set swipe sensitivity, and customize animation, spacing, and auto-cycle easily.
Make it with Workshop
Build your own component with AI
Instructions
Copy and paste the CardStackCarousel component into your Framer project.
Use the Cards control to connect your card designs - drag any frame or component in as a card.
Adjust properties in the right-hand panel to customize stack spacing, scaling, swipe sensitivity, animation speed, and gesture method (swipe or tap).
Set width and height in your Framer canvas for the desired card stack size.
Enable auto-cycle for automatic card transitions, and fine-tune timing and interactions for your use case.
How it Works
Cards: Add as many card components or frames as you like; each will be stacked in the carousel.
Stack Spacing: Controls the vertical space between each visible card in the stack.
Stack Scale: Shrinks each card slightly as they go down the stack for a 3D layering effect.
Drop Distance: Distance (in px) the top card must be dragged to trigger an advance.
Auto Cycle: Enables or disables automatic timed card advance.
Cycle Interval: Set the pause duration before the stack cycles to the next card (when auto cycle is on).
Animation Duration: Adjusts transition speed for card movements (when auto cycle is on).
Advance Method: Choose between swipe (drag card down) or tap to advance cards.
Swipe Threshold: (Visible only for "swipe") Set how far a card must be dragged (as a % of Drop Distance).
All controls are available in the component panel for fast no-code adjustment.
Features
Responsive and flexible: Adapts to your custom card designs and parent frame size.
Gesture ready: Supports both swipe (drag down) and tap to advance cards.
Customizable animations: Tune spacing, scale, speed, and swipe sensitivity.
Automatic cycling: Auto-advance cards with custom intervals for slideshows and onboarding flows.
Easy setup: Just drop your card frames in, no extra setup needed.
Performance optimized: Only visible cards animate; unused cards stay hidden for smooth UX.
Framer-native: Built for Framer’s design panel and interactions - no code required.
Properties Control Panel
Made with ❤️ by Nitso
