Hi, I'm trying to just do a add class when certain elements come into view, specifically when the top of these element hit the center of the viewport.
So 'top center' as the start position. Works great, the issue is if one of the target elements is already positioned above the center of the viewport when the page loads, or is near the center of the viewport, the adding of the class is never triggered or only sometimes triggered, but I need to be. (view the codepen full screen to force the top item to be at the top of the viewport to see what i mean)
short vid to show what i mean - https://www.loom.com/share/65bad6abdf224d2eb6595e0a76a0fbd1 (notice the third item seems to behave unpredictably, due to where it is positioned on the page when it loads)
I wondering if there's a better way to approach this, I really just need it so that any of these elements that is above the center of the viewport should have the active class, anything below does not.
Is there something built into scrolltrigger that covers this? or if it's just a case of needing to add some extra JS outside of the scroll trigger function to work out the starting positions and add the class seperately?