Dynamic animation with React and gsap timeline

[VictorAdt]

Hello!

 

I'm currently working on an animation with react and gsap.

i'm trying to animate svg with gsap and react. i'm pretty close to the result but there is something i cant figure out:

You can see my sample here: https://codesandbox.io/s/sharp-tree-jmswz

When i hover a text, i only want to animate the hover one. but now every text are animating.

I know its expected because they have all the same ref.

I dont understand how to puts the refs dynamicaly (my data will be avaible through an API) to manage to animate only the one i'm hover on.

 

i hope i'm clear in what i'm asking, and i'm sorry for my english. i only speak geek english so i'm in panic when i have to write in english )

 

thanks!

 

Victor

 

 

See the Pen by s (@s) on CodePen

[ZachSaucier]

Hey Victor and welcome to the GreenSock forums.

 

The main issue here is that you only have one timeline and are targeting all of your targets with that. What you should do instead is loop through each of your targets and create an animation for each that is scoped to that element. To learn more about that, check out my article about animating efficiently.

 

This article shows how to loop through an array of refs and do an animation for each one. I highly recommend you go through it  

 

Sides notes:

• You don't need to import TimelineLite. Just import gsap as the installation docs cover and use gsap.timeline() - no new needed either.
• You can leave out all of your durations since 0.5 is the default duration.
• I recommend using GSAP's defaults to set the default ease to none for your timeline. 

[VictorAdt]

Hi Zach,

Thanks for your answer and the links you send me were very usefull. I read them and learn a lot!

I finally manage to do what i wanted.

https://codesandbox.io/s/sharp-tree-jmswz?file=/src/App.js

thanks you a lot again for your help!