GreenSock MorphSVGPlugin

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

Greensock really knocked it out of the park with this one. You know shape morphing? It’s a cool effect with loads of uses ranging from practical to artistic. SMIL can do it, but the future of that is in jeopardy. Other JavaScript libraries can do it, but they are bound by the same limitation as SMIL: they need to have the same number of points. This new Greensock plugin isn’t bound by that, meaning you could morph an apple into the word apple (!).

Beyond that, you can control what they call the shapeIndex, which controls which point on the previous shape moves to which point on the new shape, which has drastic impact on the way the animation plays out, so you can make it smooth and intuitive rather than awkward and forced. Not to mention that can convert your typically-non-morphable shapes into a morphable shape for you.

They have a collection of examples to check out. You have to be a member of Club GreenSock to use it in production, but you can play with it for free on CodePen. I have a simple template to get you started.

Direct Link →