omibee Posted October 19, 2022 Share Posted October 19, 2022 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 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 19, 2022 Solution Share Posted October 19, 2022 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! 1 Link to comment Share on other sites More sharing options...
omibee Posted October 19, 2022 Author Share Posted October 19, 2022 Thank you Rodrigo! You're a star 🌟 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now