Documentation
v1.8
GETTING STARTED
DYNAMIC ISLAND
Premium element
ShowCase
Scroll Stack
Scroll Stack is a responsive, customizable component that creates an engaging scrolling experience where cards stack with visual effects like scaling, rotation, shadows, and darkening as the user scrolls down the page.
Preview
Open previewQuick Setup
data-scrollstack-container
Required
Main selector applied to a div or container element that identifies it as a Scroll Stack container.
data-scrollstack-card
Required
Applied to each card element within the container that should participate in the stacking effect.
Advanced configuration
data-scrollstack-offset
Optional
Sets the vertical offset in pixels.
Default: 16
data-scrollstack-padding
Optional
Sets the padding in pixels.
Default: 50
data-scrollstack-anchor
Optional
Sets the anchor point for stacking. top or bottom.
Default: top
data-scrollstack-disabled
Optional
Disables the stacking effect when set to "true".
Default: false
data-scrollstack-threshold
Optional
Sets the screen width threshold in pixels for mobile detection.
Default: 768
data-scrollstack-scale
Optional
Sets the base scale factor for stacked cards.
Default: 0.92
data-scrollstack-scale-increment
Optional
Sets the incremental scale reduction per stacked card.
Default: 0.04
data-scrollstack-shadow
Optional
Enables or disables shadow effects when set to "true" or "false".
Default: true
data-scrollstack-darken
Optional
Enables or disables darkening effects when set to "true" or "false".
Default: true
data-scrollstack-rotate
Optional
Enables or disables rotation effects when set to "true" or "false".
Default: true
data-scrollstack-perspective
Optional
Sets the perspective value in pixels for 3D transformations.
Default: 1000
data-scrollstack-animation-duration
Optional
Sets the vertical offset between stacked cards in pixels.
Default: 0.8
data-scrollstack-stagger-offset
Optional
Sets the duration of animations in seconds.
Default: 20
data-scrollstack-mobile-scale
Optional
Sets the scale factor for mobile devices.
Default: 0.6
data-scrollstack-disable-mobile
Optional
Disables effects on mobile devices when set to "true".
Default: false
We're here to help
Choose how you'd like to connect with our support team
Contact Support
Get help from our team of experts
Response within 24 hours