What is it?

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.

How to set it up?

To set up the Timeline Gradient, the following attributes must be applied:

'data-timeline-gradient'. Activates the element's animation. No value is needed; simply adding this attribute enables the effect.

'data-gradient-preset'. Specifies the gradient color scheme for the timeline and items. The available presets are:

'data-timeline-item'. Applied to each timeline item to enable individual item animations as the user scrolls. These items are revealed as the user scrolls past them.

'data-gradient-start' (Optional). Define your own colour (in hexadecimal format) to start the gradient. e.g: #3284db

'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.