Looping through Nav items and applying animation in React

[TaiwoJazz]

@Rodrigo Could you help me take at a look at this minimal demo and help me figure out what i'm doing wrong... I'm just trying to loop through my nav items and play my animation on hover... Thanks...

[Rodrigo]

Hi,

 

Is better to create the animation on each iteration but just keep one instance of GSAP Context in your component, otherwise it can get a bit messy.

 

This seems to work the way you intend:

https://codesandbox.io/s/hover-on-nav-element-react-forked-ydjc1d?file=/src/Nav.jsx

 

Just store a timeline instance for each link on an array that is kept through re-renders (useRef) and, since you're mapping your links obviously you'll have the same number of links and animations, you can pass that index to the mouse enter/leave handlers. In fact if you want even more abstraction you can create just a single event handler that toggles the reversed state of the particular target:

https://codesandbox.io/s/hover-on-nav-element-react-forked-7hy179?file=/src/Nav.jsx

 

Hopefully this helps,

 

Happy Tweening!

[TaiwoJazz]

Thanks a bunch...