Jump to content
Search Community

GSAP horizontal loop miscalculating on nextjs

stellar027 test
Moderator Tag

Recommended Posts

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:

 

 

 

Link to comment
Share on other sites

  • 6 months later...

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});
});

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...