GSAP horizontal loop miscalculating on nextjs

[stellar027 0 Likes (Newbie)]

I am using the horizontalLoop function provided in the helper functions to animate different lengths of <h1/>s in my NextJS app. I am also using Sass to style my components. I have added the following code in my _app.js to make sure gsap calculates properly:

 

import { useRouter } from "next/router";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  
  const refresh = useCallback(async () => ScrollTrigger.refresh(true), []);
  
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    router.events.on("routeChangeComplete", refresh);

    return () => router.events.off("routeChangeComplete", refresh);
  }, [router.events, refresh]);
  
  return <Component {...pageProps} />;
}

The problem I think is the refresh is happening before the document is loaded. So, I added the following code in my Marquee component:

const gsapAnimate = () => {
	const boxes = gsap.utils.toArray(`.marquee-item-${uniqueId}`),
      		 tl = horizontalLoop(boxes, { repeat: -1, speed: 4 });

    ScrollTrigger.create({
      trigger: triggerClass,
      start: "top bottom",
      end: "bottom top",
      // markers: true,
      onEnter: () => tl.play(),
      onLeave: () => tl.pause(),
    });
 };


useEffect(() => {
    window.addEventListener('load', gsapAnimate);

    return () => {
      window.removeEventListener('load', gsapAnimate);
    };
},[]);

Now, the calculations are correct and it's animating well but when I navigate away from the page and get back, the animation stops. How can I get around this?

 

What I Want:

Current State:

 

 

 

[OSUblake 18,474 Likes (Superhero)]

Welcome to the forums @stellar027

 

If you need help, please provide a minimal demo showing the issue. You can use CodeSandbox for next.js. Thanks!

 

[akalex_x 5 Likes (Newbie)]

The video looks a lot like an issue I was having in the past ( not a next js project, but might be the same issue ). The issue was not with gsap, but the font loading. GSAP would calculate the width of things before the font I selected loaded, so I had to wrap my code like this.
 

document.fonts.ready.then(function () {
  var loop = horizontalLoop($words, {paused: false,repeat:-1, speed:.25});
});