Scroll Gradient

HTML Tag

Determines the html tag of Scroll Gradient. You can select headings from h1 to h6 or paragraph. h3 by default.

Gradient Wrapper Style

Scroll Gradient has a wrapper. You can customize its styles right from here. (Width, Height and Padding). Scroll Gradient can't have any other wrapper apart from the native one as it will break the pin animation.

Gradient style

This is the Scroll Gradient content. You can customize its typography, width and max-width.

Colors

You can set all the colors you want to create your gradient from this repeater.

From

Scroll Gradient can be revealed from bottom or top. From bottom by default.

Start

Determines when the animation starts. top top by default (when the top of the trigger hits the top of the viewport). You can check the start options at GSAP ScrollTrigger docs.

End

It will determine how much scroll has to be done until the gradient is completed. +=300% by default.