React / Next Animation Issue on viewing page 2nd time

[bultano]

Hi all,

 

I hope you're well.

 

I am currently having an issue with GSAP with Next where the 2nd time i view the page with the animation it does not work correctly and just becomes full screen instantly, I believe it is due to my clean up but I have tried a few things:

 

I am also using ScrollSmoother.

 

 

Here is my code, In the mean time i will try to create a demo link.

 

useEffect(() => {

    gsap.registerPlugin(ScrollTrigger);

 

    const mm = gsap.matchMedia();

 

    // Check if the screen width is above 1024px

    const ctx = gsap.context(() => {

      mm.add("(min-width: 1024px)", () => {

        // --- ORANGE PANEL ---

        gsap.to(".agentVideoParentInner", {

          scrollTrigger: {

            trigger: ".FullHeightVideoWithHeader",

            scrub: true,

            pin: true,

            start: "top top",

            end: "+=130%",

          },

        });

 

        gsap.to(".agentVideoParentInner", {

          width: "100%",

          padding: "0px 0px",

          scrollTrigger: {

            trigger: ".FullHeightVideoWithHeader",

            scrub: true,

            start: "top top",

            end: "+=100%",

            onUpdate: (self) => {

              // Check if the animation is halfway completed

 

              if (self.progress > 0.8) {

                console.log("DUN");

                gsap.to(".PopVideoMainSection", {

                  opacity: 1,

                  bottom: "25px",

                  duration: 1,

                  ease: "Power3.easeOut",

                });

              } else {

                gsap.to(".PopVideoMainSection", {

                  opacity: 0,

                  bottom: "-100px",

                  duration: 1,

                  ease: "Power3.easeOut",

                });

              }

            },

          },

        });

      });

    });

 

    // Revert the context when the component unmounts

    return () => {

      ctx.revert(); // cleanup!

 

      ScrollTrigger.clearScrollMemory();

      window.history.scrollRestoration = "manual";

      ScrollTrigger.refresh();

      window.scrollTo({ top: 0 });

    };

  }, []);

[bultano]

See the Pen QWREWKz by bultano (@bultano) on CodePen.

The demo works as its not in react so i think I'm right with the cleanup issue, i tried useGSAP and this also did not fix the problem.

 

 

[GSAP Helper]

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork. Here one for  React (please read this article!) or Next!

 

We definitely recommend  the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅