React/GSAP Flip error (with demo link)

[asond]

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.

[asond]

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.

[Rodrigo]

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!

[asond]

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.

 

 

 

[GreenSock]

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

[asond]

Thank you! Converting to a number fixes it for me locally as well.