Scroll trigger - trigger all items with the same class issue

[jjmolnar 1 Likes (Newbie)]

Hey guys, i need a little help with this one. I have multiple elements with the same class on the page. And i want to animate on the one that is entering the viewport. I thought that scrollTrigger only takes the element in the viewport and animate that exact one. Pls advice. Many thanks

See the Pen mdOBqEa by Buzzworthy (@Buzzworthy) on CodePen

[akapowl 5,136 Likes (Superhero)]

18 minutes ago, jjmolnar said:

I thought that scrollTrigger only takes the element in the viewport and animate that exact one.

 

Hey @jjmolnar

 

ScrollTrigger is incredibly powerful, but it can't know what you want if you don't explicitely tell it to. The way you have things set up, you are adressing all elements with the class .title with your tween and triggering the animation for all of them on the first element with that class. If you want to trigger an animation for each element individually, it would probably be best to loop over all the items and create a ScrollTrigger forEach of them individually.

 

See the Pen 4e1dea41abea031de7b9adaed8170647 by akapowl (@akapowl) on CodePen

 

 

This is actually one of the most common ScrollTrigger mistakes (and probably GSAP mistakes in general); using generalselectors when wanting to animate specific elements only. You can read on that in this article, which is very helpful in a lot of cases, when things don't work as you might expect.

 

 

 

Edit:

In a case like this when using scrub, you would also have to make sure that there is enough scrollable content at the end, if you wanted to make sure that your last scrubbing-tween can finish its scrubbing animation.

 

Hope this helps.

Cheers, Paul.

 

[tailbreezy 221 Likes (Specialist)]

See the Pen 206fb04b30a8b830b379713777ea8f42 by dadacoded (@dadacoded) on CodePen

[jjmolnar 1 Likes (Newbie)]

Ugh, so obvious. Thank you guys for the help

[DavidMurphy 0 Likes (Newbie)]

To trigger a click on multiple elements with the same class but when i do so the first element only get clicked and not the others, frankly I'm trying to make likes on customwritings com review to ask from profile answers by using the console of firefox so this is what i did $('.like').trigger('click'); I don't think this is that easy to use one handler for all the Triggers on multiple Objects as you need to refer the Objects and some of them doesn't have any relationship between them.

[OSUblake 18,476 Likes (Superhero)]

Hi David,

 

If you need help, please start a new topic and include a minimal demo of your issue. Thanks!