Jump to content
Search Community

Same multiple scrolltrigger for different content

dotun12 test
Moderator Tag

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

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.
×
×
  • Create New...