Morphing along path

[Guest Crandall]

Hey there,

I just discovered Greensock yesterday and am so far very impressed!

I have a wheel chart (which you can view via the codepen url, although I'm not including the animations because they're tied to my server), that I want to animate in to various states (such as hiding certain wedges or changing the proportions). I'm currently doing all the math for the chart server side and what I'm handing back when I change states is a list updated paths (1 for each visible wedge, just to be clear) for where I want the wedges to end up. I'm using TweenMax.to to morph each wedges "d" attribute to its new one, but they morph there in a straight line and I'd prefer that they do so along a bezier. I know of the bezier plugin, but from I've seen that seems to be only for animating static objects, and I want mine to be stretching or shrinking as they move. Is it possible to combine the bezier plugin with what I'm doing? 

 

Many thanks!

 

P.S. if this is something that is doable only by joining Club Greensock, that is fine.

See the Pen ozdqGE by anon (@anon) on CodePen

[Jonathan]

Hello Crandall, and Welcome to the GreenSock forum!

Have you looked at the MorphSVGPlugin Docs page?

http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/

The MorphSVGPlugin also has a method MorphSVGPlugin.pathDataToBezier() to animate along an SVG path

 

And also MorphSVGPlugin.convertToPath()

 

 

 

[Guest Crandall]

Hey Jonathon,

Thanks so much for your response!

I did look at the docs, but it is still unclear the two can be combined. In the pathToBezier example video you linked, what I would need is for the balloon to morph in to a different shape (already defined as a path) while it is still moving. Is that possible?

 

Thanks!

[Jonathan]

Basically the MorphSVGPlugin would do the morphing of the shape and you use the pathToBezier to move that morphed element while it is still moving. So it would be 2 separate tweens.

 

1st tween uses pathToBezier

2nd tween that start half way through the first tween uses MorphSVGPlugin

 

Kind of like this .. just fast and dirty example::

 

See the Pen dpZjVd by jonathan (@jonathan) on CodePen

 

I just combined these 2 examples to make the above example:

 

pathToBezier example:

See the Pen 550e4b59c59355eef809658fbce77ee9 by GreenSock (@GreenSock) on CodePen

 

MorphSVGPlugin example:

See the Pen rOjeRq by GreenSock (@GreenSock) on CodePen

 

[Guest Crandall]

Yes! Awesome! Thank you so much!