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
Quick Setup
data-folder=true
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