GSAP ScrollTrigger doesn't run on route change (React Router v6 route transition with framer-motion)

[emot1onz]

Hello,

i'm using React Router v6 for the routing. On my two demo sites are ScrollTrigger Animations that run on useLayoutEffect with gsap.context.

Now i'm trying to incorporate some route transitions with framer-motion, but somehow the Scroll Animations are not working on route change.

I made a simple demo: https://codesandbox.io/s/bold-worker-3f5cnr?file=/src/App.js

Thanks for helping out!

[Rodrigo]

Hi,

 

Normally the revert method that runs on the useEffect/useLayoutEffect hook is enough for clearing anything GSAP related, which is something that is actually happening, I added some id to your ScrollTrigger instances and they show the id of the target page for the corresponding route. This could be related to the way Framer works behind the scene. Probably if you try the same example without the route transitions, probably it will work without any issues.

 

We have this example for route change animations but using React Transition Group and GSAP for the route animations and all GSAP animations on every route work as expected:

https://stackblitz.com/edit/react-6rzfpp?file=src%2FApp.js

 

Hopefully this helps.

Happy Tweening!