omibee Posted October 12, 2022 Share Posted October 12, 2022 Thank you for your amazing work! We're trying to animate a new svg by clicking a button. The onReverse seems to work but the new svg appears immediately instead of animating. Adding multiple timelines would solve it, but this is a sample of a larger project where that wouldn't scale that well. We tried to use the restart() instead of the play() but makes no difference. Any suggestion would be appreciated See the Pen zYjyebG by rgoncalves_123 (@rgoncalves_123) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 12, 2022 Solution Share Posted October 12, 2022 The main problem is that you're trying to reuse the same animation (which is fine usually) but you are completely replacing the actual DOM elements that the animation was targeting. When you swap out the innerHTML, that means it's eliminating all the previous DOM nodes and creating entirely new ones. So the target that your animation was affecting is no longer in the DOM at all.  It's pretty easy to work around though - just recreate the tween and have it target the new element(s): See the Pen eYrxYYY?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
omibee Posted October 18, 2022 Author Share Posted October 18, 2022 Thank you very much for the help and the fast response 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