Documentation
v.1.6.1
GETTING STARTED
DYNAMIC ISLAND
Premium element
Interaction
Timeline Gradient
Timeline Gradient is a visually appealing, scroll-based timeline component that reveals items sequentially as the user scrolls. It uses gradient backgrounds on the timeline line and on revealed items to provide a dynamic and modern effect.
Preview
Open previewQuick Setup
data-timeline-gradient
Required
Activates the element's animation. No value is needed; simply adding this attribute enables the effect.
data-timeline-item
Required
Applied to each timeline item to enable individual item animations as the user scrolls. These items are revealed as the user scrolls past them.
Available Presets
data-gradient-preset="preset-name"
Optional
sunset
ocean
forest
lavender
cherry
sky
autumn
midnight
neon
cosmic
aurora
senset-beach
northern-lights
Advanced configuration
data-gradient-start
Optional
Define your own colour (in hexadecimal format) to start the gradient.
data-gradient-end
Optional
Define your own colour (in hexadecimal format) to finalise the gradient.
data-line-gradient-start
Optional
Define your own colour to start the scroll bar gradient.
data-line-gradient-end
Optional
Define your own colour to finish the gradient of the scroll bar.
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