Jump to content


MorphSVG singular repeat

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I have an animation where I want the path data to change at a certain point so I'm using morphSVG.  

codepen link: 


Am I correct in thinking if I want to reverse a morphSVG tween I have to do {repeat: 1, yoyo: true} within the object vars like i have done in the above pen?  


Normally I would just reverse an animation that is part of a timeline by doing the opposite of from / to etc on the next part of the timeline, but I can't do this with morphSVG because it would mean having the visiblity:hidden css on both compound paths which would then obviously make the animation invisible.


I just want to make sure what I've done is the best way to achieve a reverse on a morphSVG tween incase there is a different / preferable way of doing this.  It's going to be part of a larger more complex animation where there will be multiple compound paths I'll need to morph to a new shape and then back again.


From what I gather I shouldn't use the reverse() method on an individual part of timeline because of where the playhead will start? And if I did, it could get very complicated very quickly doing it that way? 


Any thoughts / corrections would most welcome.



See the Pen qNNMMz by pauljohnknight (@pauljohnknight) on CodePen

Link to comment
Share on other sites

Not sure what you're asking. The MorphSVGPlugin only cares about path data, so element visibility makes no difference.

See the Pen QGxWyK by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

I was a little confused by the question as well. Are you asking about morphing back to the original shape? 


I don't know if this will be of any help, but here's an older pen of mine that morphs through a series of shapes and then back to the original. 


See the Pen yejGvb by PointC (@PointC) on CodePen


Happy tweening.


  • Like 4
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.