emot1onz Posted June 29, 2023 Share Posted June 29, 2023 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! Link to comment Share on other sites More sharing options...
Rodrigo Posted June 30, 2023 Share Posted June 30, 2023 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now