Jump to content
Search Community

Animation onComplete does not play

omibee test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...