Help Animating multple elements that have the same class name

[potters_bluff]

Hello, I have been searching for a while, and trying different configurations for a solution to this problem, but just can't get it working.

 

I'm trying to run the same timeline (that has a class of .fade-wrap) each time it/any enters the viewport. As you will see in the CodePen, I have seen in other examples to wrap code with a foreach like:

 

const fadeSections = gsap.utils.toArray(".fade-wrap");
fadeSections.forEach((fadeSection) => {

 

animation code here

 

});

 

But it still runs the timeline on both as soon as the first one enters the viewport. I'm sure this is a simple fix, but I just cannot get it! Any help is greatly appreciated!

 

See the Pen rNeZrPp by rhilton (@rhilton) on CodePen

[ZachSaucier]

Hey potters_bluff and welcome to the GreenSock forums. Thanks for the clear demo!

 

You're making one of the most common ScrollTrigger mistakes: using a generic target when you want to use a more specific one. Just switch out trigger: ".fade-wrap", with trigger: fadeSection, and you'll be good to go!

[ZachSaucier]

You may also want toggleActions: "play reset play reset" on your ScrollTrigger, not sure  

[potters_bluff]

19 minutes ago, ZachSaucier said:

Hey potters_bluff and welcome to the GreenSock forums. Thanks for the clear demo!

 

You're making one of the most common ScrollTrigger mistakes: using a generic target when you want to use a more specific one. Just switch out trigger: ".fade-wrap", with trigger: fadeSection, and you'll be good to go!

Hmm, still doing the same behavior after switching the trigger line... I updated that pen, you can check it out.

[ZachSaucier]

11 minutes ago, potters_bluff said:

Hmm, still doing the same behavior after switching the trigger line... I updated that pen, you can check it out.

You need to switch it out for the tween's target as well  Sorry, I thought to do that implicitly but should have been more clear.

[potters_bluff]

16 minutes ago, ZachSaucier said:

You need to switch it out for the tween's target as well  Sorry, I thought to do that implicitly but should have been more clear.

Ahh, now it makes sense, and works! Thanks so much @ZachSaucier!