From Gsap 3.8.0 to 3.12.0

[mixpofo]

Hello, everyone! I am using GSAP 3.8.0 with Next.js, and everything is working fine. However, when I upgraded to GSAP 3.12.0, my code stopped working as expected. Did something change from version 3.8.0 to 3.12.0? Here is my code:

 

  function getScrollAmount() {

    const extElements = document.querySelector("#extElements");

    let racesWidth = extElements.scrollWidth;

    return -(racesWidth - window.innerWidth);

  }

 

  useEffect(() => {

 

    const extElements = document.querySelector("#extElements");

    const tween = gsap.to(extElements, { x: getScrollAmount, duration: 3, ease: "none" });

 

    ScrollTrigger.create({

      trigger: ".extWrap",

      start: "top 0%",

      end: () => `+=${getScrollAmount() * -1}`,

      pin: true,

      animation: tween,

      scrub: 1,

      invalidateOnRefresh: true,

      markers: false,

    });

  }, []);

 

 

 

 

[Rodrigo]

Hi @mixpofo and welcome to the GreenSock forums!

 

Minor version updates never include breaking changes, just new features and, in this case of non-consecutive minor versions, quite a few bug fixes, so nothing GSAP related should break that code.

 

My suspicion is that React's Strict Mode could be the cause of this problem. Since version 18, React calls the effect hooks (useEffec/useLayoutEffect) twice, which has caused a lot of headaches. This causes ScrollTrigger instances, for mention just one issue, to get executed twice, completely messing up the calculations in the second run, especially for pinned elements.

 

Since version 3.11.0 we have GSAP Context in order to help with that and a lot of other situations where it's very handy:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

I suggest you to check the resources in this page:

As well as the starter templates we have in our Stackblitz collection:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

Here is a specific one using NextJS and ScrollTrigger:

https://stackblitz.com/edit/nextjs-5cm4qn

 

Basically your code should look like this:

useEffect(() => {
  const ctx = gsap.context(() => {
    const extElements = document.querySelector("#extElements");
    const tween = gsap.to(extElements, { x: () => getScrollAmount(), duration: 3, ease: "none" });

    ScrollTrigger.create({
      trigger: ".extWrap",
      start: "top 0%",
      end: () => `+=${getScrollAmount() * -1}`,
      pin: true,
      animation: tween,
      scrub: 1,
      invalidateOnRefresh: true,
      markers: false,
    });
  });
  return () => ctx.revert();
}, []);

 

Hopefully this helps.

Happy Tweening!