To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.
The original, native technology for shape morphing is SMIL. We have both a guide to SMIL on CSS-Tricks, and an article talking about replacements for it, since it doesn’t work in Microsoft browsers and Blink threatened to yank it at one point.
I wouldn’t suggest doing important work in SMIL but it is OG shape morphing.
See the Pen Sitepoint Challenge #1 in SVG and SMIL by Noah Blon (@noahblon) on CodePen.
Our article How SVG Shape Morphing Works covers SMIL shape morphing in detail, and the demo above is from Noah Blon’s An Intro to SVG Animation with SMIL.
To get a feel for the must have same # of points thing, you might enjoy playing with Shape Shifter:
MorphSVG (Greensock GSAP Plugin)
Moving right along to probably the most robust possible option, Greensock’s MorphSVG is a powerhouse. Bear in mind:
MorphSVGPlugin is a bonus plugin for Club GreenSock members (“Shockingly Green” and “Business Green” levels). It’s our way of showing our gratitude to those who are fueling innovation at GreenSock.
Worth it. Just MorphSVG alone is amazing. Unlike almost any other shape morphing method, it can tween between shapes of any number of points. It does so performantly, in a safe cross-browser fashion, and gives you more fine grain control over how the animation goes down.
See the complex morphing happening here:
See the Pen Morphing SVG Slider – 20th Century Women by Sullivan Nolan (@nolakat) on CodePen.
If you’d like to play with MorphSVG, I created a drag-and-drop Pen to morphing between any two shapes (best results with SVG’s with
viewBox="0 0 100 100" SVGs with just one
See the Pen Morph Machine by Chris Coyier (@chriscoyier) on CodePen.
If you’re a user of Adobe Muse, you might be interested in the Muse Morph widget which combines Illustrator, Muse, and Greensock MorphSVG.
SnapSVG’s animate() function will animate an SVG element’s properties, including path data. Codrops has excellent examples of this in action. Here’s a little movie showing some of them off:
SnapSVG is, in a sense, Raphaël’s older brother, which could do things like this:
The newer anime.js library has shape morphing built in.
It’s a little hard to believe, but CSS is getting in on the shape morphing action! Eric Willigers, a Chrome developer, emailed me last year:
‘d’ has become a presentation attribute. This allows SVG path elements to be animated using CSS animations and Web Animations, with path(‘…’) keyframes.
I assume this is a spec change, so browsers other than Chrome will, presumably, start allowing this. For now, this works great in Chrome:
See the Pen Simple Path Examples by Chris Coyier (@chriscoyier) on CodePen.
See the Pen Mobiltelefonens Evolution (SVG Shape Morphing) by Noel Delgado (@noeldelgado) on CodePen.
There is an SVG plugin for Kute.js that allows for the animation of SVG properties, including shape morphing.
See the Pen Morph SVG with KUTE.js by thednp (@thednp) on CodePen.
The API gives you some control over the morphing, like how precise you want it to be and the ability to reverse the draw direction so different points match up to tween.
d3, probably the biggest library out there for data viz folks, can also do shape morphing. Here’s a GIF recording of a demo by Mike Bostock:
There is also a d3 plugin called d3-interpolate-path that helps make it better:
Interpolates path `d` attribute smoothly when A and B have different number of points.
“Motion graphics for the web” is the mo.js tagline, another newer library. Oleg Solomka (@LegoMushroom) has some incredible demos of what is is capable of:
See the Pen Mole :: property curves example by LegoMushroom (@sol0mka) on CodePen.
If you happen to be a video person before you became a web person (or you’re still both) perhaps you have experience working in Adobe After Effects, which is all about creating “incredible motion graphics and visual effects”. The bodymovin library exports After Effects into SVG, including plenty of hot morphing action. Here’s a great demo:
See the Pen svg jou jou monster by kittons (@airnan) on CodePen.
Great comparisons. Funny enough, I just posted a few days ago on my own blog about moving from CSS shape-driven hamburger menus to SVG. I settled on using Morpheus to animate the transition from the hamburger to the X.
Shape Shifter developer here, thanks for the mention. :)
If anyone has any feature requests or suggestions on how to improve the tool, file something on GitHub! It’s still a work in progress and I’m open to pretty much anything!
KUTE.js developer here, thanks for the mention :)
I should also mention that I just published an update to Shape Shifter that will make the web app more useful for web developers. In addition to AnimatedVectorDrawable format for Android, Shape Shifter now also export the final result as both (1) an SVG spritesheet (30fps/60fps) and (2) a CSS keyframe animation.
Note that the CSS keyframe animation only works in Chrome as of April 2017, but hopefully that will change eventually. :)
Be careful with the CSS animated ‘d’ presentation attribute. Chrome uses non-standard syntax and they may change it at some point. Here’s the Chrome bug about it: https://bugs.chromium.org/p/chromium/issues/detail?id=652822