MorphSVG singular repeat

[pauljohnknight 22 Likes (Newbie)]

Hi

 

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.

 

Paul.

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

[OSUblake 18,474 Likes (Superhero)]

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

[PointC 14,170 Likes (Superhero)]

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.