GSAP - My Tweens in my ScrollTrigger Timeline are applying to other elements

[lukestoked]

Hi everyone,

 

I need my GSAP timeline to be working correctly over multiple elements with the same class as I will be pulling in multiple articles using a looper with two images on that need to change on scroll.

 

Is there any way to make it so that my ScrollTrigger and Tweens will only effect the children on the main div and not any other elements on the page with the same class, as you can see on my codepen it triggers the animation on the second section prematurely.

 

Not sure if this is a scoping issue or I need to use a selector of some sort to only target the classes in the element that's currently active.

 

Could I potentially add a class while the timeline is active?

See the Pen poqVJLx by luke-stoked (@luke-stoked) on CodePen

[mvaneijgen]

Yep, just a scoping issue, but luckily there is a gsap.utils to help you! check out the gsap.utils.selector() to scope your elements the the current forEach() Hope it helps and happy tweening! 

 

See the Pen ZEVobGz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[lukestoked]

@mvaneijgen ah this makes perfect sense, I did come accross the gsap.utils.selector() before I put this post up but I was doing it outside of my ForEach loop so it wasn't working.

 

Thanks again for posting the solution so I can see where I was going wrong.