Documentation
v1.8
GETTING STARTED
DYNAMIC ISLAND
Premium element
Interaction
Folder
Folder Animation is an interactive component that displays an animated folder with papers inside. When clicked, the folder opens and reveals the papers inside with a smooth animation effect.
Preview
Open previewQuick Setup
data-folder
Required
Main selector applied to a div element that identifies it as a Folder Animation container.
Advanced configuration
data-folder-color
Optional
Sets the primary color of the folder.
Default: #00d8ff
data-folder-size
Optional
Controls the overall size of the folder (scale factor).
Default: 1
data-folder-items
Optional
Sets the number of paper items inside the folder (1-3).
Default: 3
data-folder-paper1-color
Optional
Sets the color of the first paper inside the folder.
Default: #E6E6E6
data-folder-paper2-color
Optional
Sets the color of the second paper inside the folder.
Default: #F2F2F2
data-folder-paper3-color
Optional
Sets the color of the third paper inside the folder.
Default: #FFFFFF
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