MorphSVG singular repeat

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.



Share this post

Link to post
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.


Happy tweening.


  • Like 4

Share this post

Link to post
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.