Animate SVG paths with react

[omibee]

Hi guys,
On a previous post, I was trying to animate replacing svgs. As you rightly mentioned, the only thing that I had to do was recreate the tweens.
I'm now trying to implement it using react and I'm seeing a weird behaviour:
When we click on the different sections, the svg is being replaced as intended, but only the same number of paths are being animated.
Here's a demo:
https://codesandbox.io/s/react-boilerplate-forked-fcrx6i?file=/public/index.html
Thank you for your amazing work!

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

[Rodrigo]

Hi,

 

There are a few issues in your setup. The most important is that you are creating your timeline only in the first mount of the component, that's why you always see only a few elements being animated, not all of them. GSAP creates the animation and is animating the nodes it finds, but then you reverse the timeline, update the paths and then play it again, but is the same timeline. You need to create the timeline when the section is updated. Just pass section as a dependency to the effect hook.

 

Another problem that comes from solving the one mentioned above is that using a from instance for the left side content while changing that content and creating the animation again when the section is updated, creates a flash of the left side before the animation is created. Is better to use a set instance to give those elements the opacity and position and then use a regular to() instance in the timeline.

 

Finally you can use GSAP Context to wrap all your code and revert it:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Here is a fork of your example:

https://codesandbox.io/s/react-boilerplate-forked-wzbxzx?file=/src/index.js

 

Let us know if you have any other question.

 

Happy Tweening!

[omibee]

Thank you Rodrigo! You're a star 🌟