ScrollTrigger: How do I handle multiple elements with the same class?

[Asored]

Hi there!

 

I'm trying to create some very basic timelines which I can use on different places on the website / page, adding a class to an element. 

For example: Each element with the class .animate-me should animate y: -100 when entering the viewport.

 

I have a problem with the scrollTrigger start and end values. When checking my attached CodePen, you will see that the animation for all .animation2 elements is triggering when the first element with the class .animation hits the center of the viewport. I think that is the expected behavior.

 

But how could I make the trigger relative to the element which enters the viewport? In the CodePen, the second headline "Another headline" should start to animate when the second a.animation hits the center of the viewport. 

 

When iterating the triggers, I could choose the trigger selector to animate exactly this element. This works (.animation) But what if I want to animate other selectors in this timeline? (.animation2 in my example) Is there a best practice to handle such situations? 

 

I hope that I could describe my problem understandable. If not, please ask me

 

See the Pen ExRNawq by asored (@asored) on CodePen

[Rodrigo]

Hi,

 

The issue is that as soon as the first element's ScrollTrigger instance hits the enter point it animates everything with the animation2 class.

 

I think the best approach is to wrap everything in a container and use that element to scope your selector text using GSAP Selector utility method or GSAP Context. Here is a live example:

See the Pen RwJoaqe by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

 

Happy Tweening!

[Asored]

Oh, understood! Thank you!

 

In my case I have no possibilities to add extra containers. My users can create some animation stuff with an UI. The DOM is always another and I don't know it. So this solution would not work for me. Is there any way with gsap.context() ?

[GreenSock]

You need some way to select the element you need. If you know you'll always have an ".animation2" for every ".animation", you could just select them all and use the index: 

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

 

Otherwise, you'll need to set up a function to walk through the DOM and find the element(s) you need. It's not really a GSAP-related question. hopefully that helps.