Anyside Button
Arrow Button
Arrow Button v2
Arrow Button v3
Arrow Button v4
Arrow Button v5
Arrow Button v6
Arrow Button v7
Arrow Button v8
Blurry Button
Bubbles Button
Crystal Button
Dot Button
Dot Button v2
Dot Button v3
FlipFlop Button
FlipFlop Button v2
FlipFlop Button v3
Glowing Button
Marquee Button
Marquee Button v2
Mask Button
Modal Button
Nudge Button
Pixels Button
Prism Button
Prism Button v2
Rainbow Button
Reel Button
Ripple Button
Ripple Button v2
Ripple Button v3
Ripple Button v4
Ripple Button v5
Ripple Button v6
Ripple Button v7
Shiny Button
Squeezy Radius Button
Strip Button
Stripes Button
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%