Leaderboard

Animating grid-gap is not yet supported. It's on the horizon but hasn't arrived yet.

The boxes are moving out of position because (in Mikel's example) the Tween is set to be relative { y:"-=50" } so, whenever the intersection observer triggers, GSAP will tell the box to move from wherever it is plus another 50 units. Use absolute to stop that. Another thing to consider is to check if the box is already animating before creating the tween. The intersection observer fires when the element is entering the viewport and exiting so, depending on the speed of your scrolling or size of your viewport you might fire the call before the animation is finished. And, remember that you are moving the very same element that you are observing so, if you are observing when it enters or leaves viewport and you move it as it enters or leaves the viewport, there is room for triggering more events than you intend to if the movement brings/removes the element from the view.

Guys it's solved. Thanks to @Dipscom pointing out the reason the boxes were moving because of the relative units in the Tween. I tested it a gazillion times to make sure the boxes did not move out of position and it passed. Thank you @mikel you have been super helpful. Thank you all for your time and effort! https://codepen.io/ikaizen/pen/ZNJzvm

Hi @Special, Welcome to the GreenSock Forum. We are specialists in animations but not the official forum for ScrollMagic. Just for fun: https://codepen.io/mikeK/pen/rgwRZL More about GreenSock e.g. here: 3D Transforms Or better here: get started Happy tweening ... Mikel

Hi @Ikai, Just do it using ScrollMagic, tweening the margin-top value and building two loops: https://codepen.io/mikeK/pen/byRKWo I do not know if there is a chance to tween grid-gap. @GreenSock ?? Happy weekend ... Mikel

You might want to start a new post for this as it attached to a very old one. As far as the issue goes it suggests that something is causing the text to change and reflow after document ready which I presume is what you mean by ready. It's generally better to setup animation after window.onload that way all elements should be loaded, also make sure that the splittext script runs after any other scripts that may affect the text or any containers it might be in. Without a working example it's kind of impossible to diagnose further.