SVG Animations

Chapter 10. MorphSVG and Motion Along a Path

There are a lot of amazing features available as plug-ins for GreenSock. The first ones we’ll go over are MorphSVG and motion along a path (BezierPlugin), because these two features are virtual powerhouses for realistic movement in SVG.

Loading Plug-ins

MorphSVG is a paid-for plug-in, but chances are you’ll want to play with it before you spend money. GreenSock makes this possible by providing CodePen-safe versions of its plug-ins, which you can use in pens as you like.

Don’t forget to load the plug-in resources and TweenMax.min.js into your pen before you get started!

MorphSVG

One of the most exciting features of GreenSock is MorphSVG. At the time of publishing, GreenSock is the only library that supports tweening paths using an unequal number of path points. SnapSVG, SMIL, and even D3 allow you to change a path’s shape into another one, but if the path points are uneven, the morph either fails or looks incredibly ugly and unwieldy. MorphSVG can mutate shapes with uneven path points beautifully, and with findShapeIndex() you can even fine-tune the type of morph that’s created.

In order to morph an SVG path into another, all you need to do is point from one ID to another. Seriously, it’s just that simple. And you can create the most amazing effects. The syntax looks like this:

TweenMax.to("#pathFrom", 1, {morphSVG:"#pathTo"});

MorphSVG will honor where the path is in the viewBox, so keep in mind when you make your SVGs that you ...