Problems with utils.toArray in react

[Pollux Septimus]

I am working on this animation for a navbar where I have a list of links that I would like to fade in from `opacity 0 and y - some px` to `opacity 1 and y 0` in a staggered way. 

 

The issue is that when I refresh the page neither the `gsap.set` nor the animation from the TL seems to work properly. The only time they work as expected is when I do changes to TL and save. For example, I change the `duration` from 0.3 to 0.2 and save it. 

 

I am not sure what is the issue but I think it has something to do with the `toArray` method and the way react rerenders component. 
Is this something common with react? Is there a fix for it? 

Here is a code sandbox: https://codesandbox.io/s/compassionate-microservice-7u6vv3?file=/src/App.js 

See the Pen App.js by s (@s) on CodePen

[GreenSock]

I'm not a React guy and I'm not sure I understand your question properly but when your page first loads, there ARE NO ELEMENTS with the ".link" class. You can use console.log() to see. Then, when you toggle the menu, the React component re-renders and there are link elements. But your useEffect() only runs once (initially) so the links Array inside there is always gonna be empty. The reason you might notice a difference when you change a duration or something is likely due to the live reloading feature in the editor where it's trying to only inject the changed stuff. I'd consider that more of a bug than anything (with the live reloading). 

 

So every time you even rollover a link, it's re-rendering the component and re-creating your links Array. No bueno. 

 

I assume you intended to do something like this(?): 

https://codesandbox.io/s/brave-water-w94nb6?file=/src/App.js

 

These are all React-related problems. I think you've gotta put the toggleNav in your dependency Array of the useLayoutEffect(). And just create your links Array in there too. 

 

Does that help? 

[Pollux Septimus]

It did help!

The question was about the `utils.toArray` method in gsap, specifically whether it might cause any problems with react's rerendering process.

 

However, I resolved the issue by using `querySelectorAll` on the parent ref and initializing an empty array state when the component is rendered and adding that state to the dependency array of the useEffect where I keep all the gsap animation.  This way the `links` are 100% rendered when gsap "does stuff to them"

 

Although, There is still an issue where I get a flesh of the navbar before `gsap.set` sets all the initial stylings.

 

Thank you for your answer!

Edited April 2, 2023 by Pollux Septimus
misspels

[GreenSock]

5 hours ago, Pollux Septimus said:

The question was about the `utils.toArray` method in gsap, specifically whether it might cause any problems with react's rerendering process.

Nah, that wouldn't cause any problems whatsoever. Think of it like a more robust version of document.querySelectorAll() that returns a legitimate Array.

 

5 hours ago, Pollux Septimus said:

However, I resolved the issue by using `querySelectorAll` on the parent ref and initializing an empty array state when the component is rendered and adding that state to the dependency array of the useEffect where I keep all the gsap animation.  This way the `links` are 100% rendered when gsap "does stuff to them"

Great. 👍 But didn't the fork I provided resolve things already? 

 

5 hours ago, Pollux Septimus said:

Although, There is still an issue where I get a flesh of the navbar before `gsap.set` sets all the initial stylings.

Are you using useLayoutEffect() or useEffect()? We recommend useLayoutEffect() for that very reason. It's the "flash of unstyled content" thing. That's totally unrelated to GSAP. It's just that your JS is executing after the browser renders the initial state.

 

[Pollux Septimus]

Awesome! Thank you!

 

Quote

Great. 👍 But didn't the fork I provided resolve things already? 

Unfortunately, it had some issues. One of which was that the animation in reverse would play instantly. 

[GreenSock]

4 minutes ago, Pollux Septimus said:

Unfortunately, it had some issues. One of which was that the animation in reverse would play instantly. 

Did you still need help with something or are you all set? 

[Pollux Septimus]

Set!