Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Morphing along path

Recommended Posts

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

Link to comment
Share on other sites

Hello Crandall, and Welcome to the GreenSock forum!

Have you looked at the MorphSVGPlugin Docs page?


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


And also MorphSVGPlugin.convertToPath()




  • Like 1
Link to comment
Share on other sites

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?



Link to comment
Share on other sites

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



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