Batch + Scrub

[limbo]

Hello

 

I'm fairly new to GSAP (and loving it BTW) and completely new to the forums (👋). Using it in all commercial projects now.

 

I'd like to set up a series of 'layers' on the page that scrub, using batch (So I only need to call the animation on a single class).

 

This is what I have:

 

ScrollTrigger.batch(".layer.anim", {
  onEnter: (elements, triggers) => {
    gsap.to(elements, {
        ease:'power1.inOut',
        delay:0.25,
        opacity: 1,
        stagger: 0.25,
        scrub:1, // added this, no joy..
        duration:0.6,
        y:0
        });
      }
});

 

I'd hoped adding 'scrub' to this would allow each layer to run onEnter...

 

Does anyone have any ideas they can share for this?

 

Thanks.

[limbo]

Pen:

 

See the Pen rNWxodR?editors=0010 by liamcrean (@liamcrean) on CodePen

[ZachSaucier]

Hey limbo and welcome to the GreenSock forums.

 

You're adding ScrollTrigger properties to the tweens vars object instead of the ScrollTrigger object. Move it and it should work:

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

 

However, this setup doesn't make much sense. If you just want to create a ScrollTrigger and tween for each element with that class name I recommend just using a loop:

See the Pen PobZXXJ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I think you'd learn a lot from my article about animating efficiently.

[limbo]

Thanks (and that was quick 😀)

 

All makes complete sense. 👍

[limbo]

19 hours ago, ZachSaucier said:

I think you'd learn a lot from my article about animating efficiently.

 

This was a great read. Thanks 👍