asond Posted February 12 Share Posted February 12 I am working on a navigation menu that uses a dot underneath the active link. I want to animate the dot by reparenting it using Flip when a user navigates to a different page. I found a helpful example of reparenting using Flip in a react project created by someone here, and I forked it. My fork is here: https://stackblitz.com/edit/vitejs-vite-9pac1m?file=src%2FApp.jsx I have added a new onClick handler `handleParentClick` that is triggered by each parent link. The handler gets the index of the link from a data attribute. I expected this to work, but each time I click a parent I get the following error: react-dom_client.js?v=14fad21f:16659 Uncaught TypeError: Cannot read properties of null (reading '_gsap') at Object._getCache2 [as getCache] (gsap.js?v=c3ccde3e:132:17) at ElementState2.update (gsap_Flip.js?v=e3486289:1024:101) at new ElementState2 (gsap_Flip.js?v=e3486289:1016:10) at gsap_Flip.js?v=e3486289:890:14 at Array.map (<anonymous>) at FlipState2.update (gsap_Flip.js?v=e3486289:889:39) at new FlipState2 (gsap_Flip.js?v=e3486289:883:12) at _parseState2 (gsap_Flip.js?v=e3486289:592:65) at Function.from (gsap_Flip.js?v=e3486289:1246:27) at App.jsx:32:10 I'm not sure how to troubleshoot this error and hoping someone can point me in the right direction. Link to comment Share on other sites More sharing options...
asond Posted February 12 Author Share Posted February 12 And just in case it helps anyone taking a look at this. I am able to reproduce the issue locally, so I don't believe it is specific to StackBlitz. Link to comment Share on other sites More sharing options...
Rodrigo Posted February 12 Share Posted February 12 Hi @asond and welcome to the GSAP Forums! The demo you linked is exactly the same we have in our Stackblitz collection: https://stackblitz.com/edit/vitejs-vite-bpwfpk?file=src%2FApp.jsx Also is worth mentioning that there is no error in it so there is nothing we can do about that particular element. Finally a menu or nav header in any SPA app (Vue, Svelte, React, etc.) should not be re-rendered when changing routes, is wasteful and unnecessary since most likely, it won't be affected by the route you're navigating to, so I would take this approach into React: See the Pen XWOVbdz by GreenSock (@GreenSock) on CodePen That codepen in combination with the approach in the Stackblitz demo should be enough. Finally I recommend you to check our React guide here: https://gsap.com/resources/React Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
asond Posted February 12 Author Share Posted February 12 Hi @Rodrigo, thank you for looking! Please take another look at the demo link I shared - I've made some (subtle) changes to the original stackblitz demo. Try clicking one of the parents, and you should see the page go blank (and an error in the console). This is happening in a new onClick handler I'm trying to get working - handleParentClick - the code for that handler looks like this: const handleParentClick = (event) => { flipState.current = Flip.getState(childRef.current); const newIndex = event.currentTarget.getAttribute('data-parent-id'); setParentIndex(newIndex); }; And thank you for the other example, I'll take a look at it. In case it is helpful information, I'm working on this as part of a Remix project, and my header component is in a template and is not re-rendering on each navigation. I've just tried to simplify the approach as much as possible in the stackblitz to get help with the error I am seeing. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 13 Solution Share Posted February 13 I think it's because you're setting the parentIndex to a String instead of a number, like "1" instead of 1. So there's no match in your JSX when you do: i === parentIndex && (...) Because "1" !== 1 I'd definitely recommend using useGSAP() instead of useLayoutEffect() too: https://stackblitz.com/edit/vitejs-vite-xunf8c?file=src%2FApp.jsx Link to comment Share on other sites More sharing options...
asond Posted February 13 Author Share Posted February 13 Thank you! Converting to a number fixes it for me locally as well. 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