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:
expectation.mp4
Current State:
reality.mp4
