Jump to content
GreenSock

stellar027

Members
  • Posts

    2
  • Joined

  • Last visited

stellar027's Achievements

  1. Is there an ETA? Cause right now both sides just seem to be playing "This isn't really my issue" which is kind of true but for us developers, it would be of great help to just land on a proper solution or workaround. Where is the I'm a React guy but also I really know about GSAP guy? I'm just leaning towards turning the strict mode off for now.
  2. 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
×