Same multiple scrolltrigger for different content

[dotun12]

I want to use the same animation and same trigger element for different content in a section.

 

<section class="sec">
        <h4><span class="animation">Section content  1</span></h4>
        <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p>
</section>

<section class="sec">
    <h4><span class="animation">Section content  2</span></h4>
    <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p>
</section>

<section class="sec">
    <h4><span class="animation">Section content 3</span></h4>
    <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p>
</section>

gsap.utils.toArray('.sec').forEach((sec, i)=>{
    let tl = gsap.timeline();
    tl.from('.animation',{duration:0.1, y:'100%', ease:'Power2.out'});

    ScrollTrigger.create({
        animation: tl,
        trigger: sec,
        markers: true,
        start: 'top top',
        end: 'top',
        scrub: 2
    });
});

 

See the Pen VweVZwE by onseyi (@onseyi) on CodePen.

[ZachSaucier]

Hey dotun12. I don't understand your question. Can you please create a minimal demo and explain what you're wanting to happen instead?

 

Side notes:

• Your ease is invalid. It should be ease: 'power2'.
• You can use yPercent instead of y: some percent. Like yPercent: 100.

[dotun12]

Hi ZachSaucier, I have added the codepen, if you notice when the scoller line get to the first start line it show all the content for all section, but I want it to only show the content for that section.

[ZachSaucier]

This is because you're passing in a generic selector string ('.animation') as the target. The target should be restricted to the particular section (sec.querySelectorAll('.animation')). See the most common GSAP mistakes post for more information.

[dotun12]

Thank, ZachSaucier, one more thing I want the content to appear once, not appear anytime  scroll up or down.

[ZachSaucier]

So add once: true to the ScrollTrigger vars.

[dotun12]

Hi ZachSaucier, I added 'once: true', but did not work

 

    ScrollTrigger.create({
        animation: tl,
        trigger: sec,
        markers: true,
        start: 'top top',
        end: 'top',
        scrub: 2,
        once: true
    });

 

[ZachSaucier]

Sorry, I didn't realize you had a scrub applied. once doesn't work with scrub.

 

You'll need to kill off the ScrollTrigger once the animation completes in that case.

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

[GreenSock]

In the next release of ScrollTrigger, I've added that functionality. You can preview it at https://assets.codepen.io/16327/ScrollTrigger.min.js