React GSAP Hover/Out multiple animations for svg paths

[fernandocomet]

Hi,

I am working in React + GSAP

I try to animate different paths (ids) from an svg asset (see image attached)

I am trying to animate the different paths on Hover/out

I am Following this example https://codesandbox.io/s/react-hover-forward-ref-pthnx but only the last one is being animated.

 

I think I have sintax problems.

Should I use a timeline instead?

 

My demo is here: https://codesandbox.io/s/little-circle-gsap-43pcbs?file=/src/App.js

 

Any help is welcome

 

 

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

Edited May 30, 2022 by fernandocomet
bad demo url

[Cassie]

Hey there Fernando.

 

So you're trying to assign three different tweens to the same ref. Refs are like variables, that's like trying to assign three different numbers to one variable. Not gonna work! You could use a timeline, but you're doing the same thing to all three elements with a little delay so you can just use a stagger instead.

 

As for the React bit. It's best to use refs instead of trying to grab the DOM element directly.  But I'm getting error: 'Function components cannot be given refs' here. I'm not a React person but I assume because this function doesn't return an element and it returns functions instead you'd need to pass along the ref somehow. 

 

Here's a demo working, but not using refs.

 

https://codesandbox.io/s/little-circle-gsap-forked-cxrr5g?file=/src/App.js

We can't really offer React advice here but this community may be able to advise more on the ins and outs of ref forwarding.

• Lunch dev discord community (Lots of React experts here, very friendly to beginners.)

 

Also, these guides may help!

 

Hope this helps!

[fernandocomet]

That is a great solution to edit the svg paths and apply GSAP to all classnames

Thanks a lot

[Cassie]

No worries!

 

Do follow up on the refs issue though because not using refs can cause issues down the line. You definitely need to work out how to grab those paths with a ref instead of a class