Getting Started
Jose Tamu
Sep 22, 2025 /
Beginner /
Light

Scroll Gradient

Scroll Gradient · 

How it works

Scroll Gradient attaches a gradient fade on scroll. You can generate your custom linear gradients by using the color repeater available.

ScrollTrigger group

Scroll Gradient animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
From: Scroll Gradient can be revealed from bottom or top. The demo uses from bottom.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: determines how much scroll has to be done until the gradient is completed. The demo uses +=300%