The Many Tools for Shape Morphing

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.

SMIL

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 <path>):

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

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:

anime.js

The newer anime.js library has shape morphing built in.

CSS

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.

SVG Morpheus

SVG Morpheus is a JavaScript lib entirely devoted to shape morphing. Here’s a great demo of it in action:

See the Pen Mobiltelefonens Evolution (SVG Shape Morphing) by Noel Delgado (@noeldelgado) on CodePen.

KUTE.js

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

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.

mo.js

“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.

bodymovin

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.