Staggering an Array of React Components

[TheBluerock]

Hi guys.

 

I am trying to achieve an overlay menu animation using this stack: React, styled-components and gsap.

 

I made a simplified example of my code in here: https://codesandbox.io/s/young-wildflower-ld94q

 

The main overlay animation plays smoothly, but the menu items dont.

 

I am trying to create a stagger effect for each MenuItem component.

As you can see using useRef() hook only works only for the last component.

 

When Iterating an array of components useRef() is not the right choice since the same ref has been passed to multiple objects,

but still I have no idea how to get a progressive fade for each component and I'm not even sure I'm using gsap in the correct way.

 

What am I doing wrong?
Thank you in advance,
Matteo.

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

[Ihatetomatoes]

Hi Matteo, you need to create an array of refs, currently only the last item is animated.

 

Checkout this guide on how to create an array of refs and then animate them.

 

Hope that helps.

[Ihatetomatoes]

https://codesandbox.io/s/distracted-flower-xp8wk?file=/src/App.js

[TheBluerock]

Thank you!

 

It is the first time I see this pattern. You touch me a lot.

 

Thank you so much!

[magicniclus]

Hi there, 

 

I'm new to greensock too, and i would like to make a map an ref containing an array to ref but using a gsap.timeline()

 

It's possible ? 

 

If so can to explain to me how ? 

 

Thank you very much and Good Code !

 

[Cassie]

Hi there, welcome to the forums -  Someone may reply with more direct help but in the interim maybe our learning articles will be of help?
 

[GreenSock]

18 hours ago, magicniclus said:

i would like to make a map an ref containing an array to ref but using a gsap.timeline()

I read that several times and I'm still lost as to what your goal is. 

 

Your code is using .map() but not assigning it to anything, so I'm struggling to see the point. I also don't understand why you're using two useEffect() calls instead of one. 

 

If you still need some help, it'd definitely be helpful if you could provide a minimal demo, like in CodeSandbox or CodePen. ?