ScrollTrigger

01 Get started

Add Package

First you have to add the package (it's not included in the main gsap package) and register it.
Then you have the scrollTrigger property in your gsap object.

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger Property

Add the scrollTrigger property, which has an object with another properties as a value, to the animation.

gsap.to(bloc, { y: 0, ease: "linear", scrollTrigger: { trigger: ".container-scroll", start: "top bottom-=60%", end: `+=${offsets[index]}`, markers: true, scrub: 1.3, }, });

Play with the Properties

Trigger

Sets the trigger element for the animation.

Start

Starting position of the ScrollTrigger.

End

Ending position of the ScrollTrigger.

Markers

Very useful for develop mode.

Toggle

Determines how the animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack.

Scrub

Links the progress of the animation directly to the scrollbar.

An element that should be pinned during the time that the ScrollTrigger is active.

02 Example

HAT

Keeps a warm head.

BODY

Highly flexible machine.

GLOVES

Essentials for those days.

SNEAKERS

Always prepared for a run.

                    
    function dissectTheBlob() {
        const hat = document.querySelector(".scrollblob-hat");
        const body = document.querySelector(".scrollblob-body");
        const gloves = document.querySelector(".scrollblob-gloves");
        const shoes = document.querySelector(".scrollblob-shoes");
        const allBlocs = document.querySelectorAll(".bloc");
        const offsets = [200, 490, 590];


        // animates the svg elements 
        gsap.utils.toArray([".bloc2", ".bloc3", ".bloc4"]).forEach((bloc, index) => {
            gsap.to(bloc, {
                y: 0,
                ease: "linear",
                scrollTrigger: {
                    trigger: ".container-scroll",
                    start: "top bottom-=60%",
                    // starts when the top of trigger element is 60% up from the viewport bottom
                    end: `+=${offsets[index]}`,
                    // ends xyz px are scrolled
                    scrub: 1.3,
                },
            });
        });

        //animates the headlines
        allBlocs.forEach((bloc, index) => {
            ScrollTrigger.create({
                trigger: bloc,
                start: "top center",
                onEnter: () => {
                    bloc.classList.add("active");
                },
                onLeaveBack: () => {
                    bloc.classList.remove("active");
                },
                // markers: true
            });
        });
    }

The ScrollTrigger