Next JS (useGsap) with requestAnimationFrame get Invalid Scope

[xyzmoonlight]

So i tried to create simple animation leveraging requestAnimationFrame and useGsap , it works well.  But i have tons of warning after move to another page like this, even the target ".something" inside the scope.

this is the minimal demo
https://stackblitz.com/edit/stackblitz-starters-rmxkhy?file=app%2Fpage.tsx

Thank you

[Rodrigo]

Hi,

 

That is to be expected actually. When the component is mounted you add that function to the RAF but when the component is unmounted you didn't canceled that particular RAF ID:

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame

 

So obviously that keeps running and looking for an element with that particular ID that is nowhere to be found in the DOM, hence the warnings by GSAP.

const { contextSafe } = useGSAP(
  () => {
    requestId = requestAnimationFrame(elementAnimationFrame);
    return () => cancelAnimationFrame(requestId);
  },
  { scope: container }
);

 

Finally I'd strongly recommend you to use GSAP's Ticker instead of RAF:

https://gsap.com/docs/v3/GSAP/gsap.ticker()

const { contextSafe } = useGSAP(
  () => {
    gsap.ticker.add(elementAnimationFrame);
    return () => gsap.ticker.remove(elementAnimationFrame);
  },
  { scope: container }
);

const elementAnimationFrame = contextSafe(() => {
  xPercent += 0.5
  gsap.set('.something', { xPercent });
});

 

Hopefully this helps.

Happy Tweening!