Stacked Card
An interactive stack of cards with customizable animations and interactions that can connect to any later
Make it with Workshop
Build your own component with AI
About
An interactive stack of cards with customizable animations and interactions. It displays cards in a cascading layout with scaling and spacing effects, allowing users to navigate through the stack using swipe gestures, taps, or automatic animations.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Instructions
Copy and paste the component into your project file
Connect your card designs to the Card Stack by using the drag handle
Customize the component's behavior and animations by adjusting the properties in the right-hand panel (scale step, spacing, animation settings, interaction methods)
How It Works
The component requires card instances as its main input, with several customizable properties:
Scale Step: Controls how much each subsequent card shrinks (0-0.2)
Spacing: Sets vertical distance between cards (0-100px)
Drop Offset: Determines how far cards move when dropped (0-300px)
Animation Speed: Controls transition duration (100-2000ms)
Pause Duration: Sets time between auto-animations (0-10000ms)
Auto Animate: Toggles automatic card progression
Swipe to Advance: Enables swipe gesture navigation
Tap to Advance: Enables tap/click navigation
Support
For any queries and help setting up the component, contact hello@segmentui.com
