pauljohnknight

MorphSVG singular repeat

Recommended Posts

Hi

 

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

codepen link: http://codepen.io/pauljohnknight/pen/qNNMMz

 

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.

 

Paul.

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. 

 

http://codepen.io/PointC/pen/yejGvb/

 

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.