Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dotun12

Same multiple scrolltrigger for different content

Recommended Posts

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

So add once: true to the ScrollTrigger vars.

Link to comment
Share on other sites

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
    });

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×