Animations (linked by class name) execute together

[amit95]

I have a simple universal animation bound to the class .fadeInUp, which, as you can tell, makes content fade in up.

 

The issue you'll see from my demo is that, the markers for .text do not pass the start marker, yet both content for the .hero and .text fade in up. Then, when you finally do scroll past section.text, the animations for both re-trigger.

 

The markers are correct, but it seems like all animations with the same class with re-trigger when you scroll past any element with that class?

 

See the Pen oNypXbp by amit_rai95 (@amit_rai95) on CodePen

[GreenSock]

Yep, that's because you're looping through EACH .fadeInUp element (good) and the tween you're creating inside each of those loops is targeting ALL of the .fadeInUp elements because you've got .fromTo(".fadeInUp"...). I assume you meant to just animate that one section in each tween. 

 

Also be careful about animating the position of the trigger element itself. You're using the section as the trigger, and you're ALSO animating the "y" value of that section in the ScrollTriggered tween which would affect where that trigger element intersects with the scroll positions. It's almost always a better idea to wrap the element in a container and use that container for the trigger and then animate the nested element to keep things clean. 

 

Perhaps you were looking for something more like this?: 

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