scrollTrigger.batch not working as expected

[jensnielsen]

Im using GSAP ScrollTriggers to animate stuff in when they enter the viewport. Right now im using ScrollTrigger.batch to stagger animations inside my footer.

It works somewhat fine. but the triggers them self seem kinda random. When i have markers turned on, they for the most part seem to work as intended. But only because the markers extend the bottom margin of the footer and there by extend the height of the page.

 

But sometimes, the markers end up above the footer, and trigger the animations before they are in the view port.

If i turn off the markers the most common result is the same as above. they get triggered before they are in the view port. with the added bonus, that the last elements, the links, dont trigger at all.

I also recently discovered that on bigger screens, it seems to work fine.

I was wondering if it is possible to set the footer tag it self as the trigger so that when it enters the viewport, it triggers the staggered animation of the span elements. How would I go about doing that?
 

Thank you in advance for the help

See the Pen vYZdYBP by JensNielsen (@JensNielsen) on CodePen

Edited September 17, 2021 by jensnielsen
Replaced code examples with codepen

[nico fonseca]

Hey @jensnielsen welcome to the forum! 💚

ScrollTrigger is not triggering because elements are outside the window screen, so you have two ways to handle this:

1. Adding start: "top bottom+=150" 

See the Pen f181d91946646195e7439a529a233c93 by nicofonseca (@nicofonseca) on CodePen

2. Adding refreshInit to set Y value as zero

See the Pen 9e57a43d560e98d4ae4ab0f5bcfc5a4d by nicofonseca (@nicofonseca) on CodePen

Another thing to keep in mind, whenever you want to handle a property with GSAP it is better to set it also there instead of CSS.

Hope this helps! 🙂

[jensnielsen]

Hi @nico fonseca 

Thank you so much for your answer. Im going with your first solution. that seems to work the best for me.

I still had some trouble, but i think i found the culprit. I had some negative margins on my footer that seemed to mess things up.
At least i think that was it. after i removed that, i got a more consistent result.

I still get various results from time to time, but that seems to be problem with my preview window. If i refresh the browser window, it sometimes reverts back to running the animation before it gets in to view. But if i relaunch the the site from webstorm, I get the same(correct) result every time.

Once again, thank you so much for your help. It's very much appreciated.