How to use scroll trigger to trigger the timeline when there are multiple elements

[Vasanth]

Hi,

 

I started using gsap scroll trigger and i have some confusions on using it when there a multiple elements. In my case there are three div with same class name " wrap-container". Inside each wrap container there are one div with class "reveal-img" and "reveal-text". Attached my codepen link

 

Can you please help me on triggering timeline when user scrolls to each wrap container div? I have tried and they are all executing at once.

 

Using scroll magic and gsap they have achieved this, but i am not able to do it using scroll trigger

 

Attached the code of scrollmagic and gsap

<let controller;

let slideScene;

 

function animateSlides() {

    //Init Controller

    controller = new ScrollMagic.Controller();

    //Select some things

    const sliders = document.querySelectorAll(".wrap-container");

    const nav = document.querySelector("nav");

    //Loop over each sllide

    sliders.forEach((slide, index, slides) => {

        const revealImg = slide.querySelector(".reveal-img");

        const img = slide.querySelector("img");

        const revealText = slide.querySelector(".reveal-text");

        //GSAP

        const slideTl = gsap.timeline({

            defaults: { duration: 1, ease: "power2.inOut" }

        });

        slideTl.fromTo(revealImg, { x: "0%" }, { x: "100%" });

        slideTl.fromTo(img, { scale: 2 }, { scale: 1 }, "-=1");

        slideTl.fromTo(revealText, { x: "0%" }, { x: "100%" }, "-=0.75");

        //Create Scene

        slideScene = new ScrollMagic.Scene({

            triggerElement: slide,

            triggerHook: 0.25,

            reverse: false

        })

            .setTween(slideTl)

            // .addIndicators({

            //   colorStart: "white",

            //   colorTrigger: "white",

            //   name: "slide"

            // })

            .addTo(controller);

    });

 

}

      

      animateSlides();>

 

See the Pen LYRzBWZ by Vasanthsteel91 (@Vasanthsteel91) on CodePen

[ZachSaucier]

Hey Vasanth and welcome to the GreenSock forums.

 

You're making one of the most common ScrollTrigger mistakes: using general targets instead of ones specific to each section. Use targets specific to each section (like in your ScrollMagic code) and it will work. Additionally we recommend using xPercent instead of x: some percent. 

[Vasanth]

Thanks @ZachSaucierand i have updated the code by identifying specific item under each section. But now the animation is not working. Can you please let me know where i am going wrong?

 

Attached my updated code pen: 

[ZachSaucier]

You created the variables but you didn't use any of them. You need to use them if you want them to have any effect.

See the Pen JjROjXo?editors=0010 by GreenSock (@GreenSock) on CodePen

[Vasanth]

Thank you very much @ZachSaucier, I am able to create my first animation using scroll trigger.

 

I have created another new scroll trigger. Animation is working fine but i am facing one issue. While scrolling down, i am able to see white border line over the image while animation is running.

 

To view the border line appearing over the image, i have increased the duration of animation in the codepen.

 

I have attached an image and my new code pen. can you please  help me in fixing this issue?

 

 

 

 

 

 

 

[ZachSaucier]

That's browser rendering error, not directly related to GSAP. You might try adding will-change: transform to the relevant elements. You can likely also work around it by making your cover element taller (making sure it's still centered).

[Vasanth]

You are correct @ZachSaucier, its the rendering issue with my chrome browser. There is no issue when it runs in firefox browser. Thanks for helping me out and answering all my questions.