The ability to morph one shape into another fascinates me. I can still remember the first time I saw it in action. It was Michael Jackson’s “Black or White” video – way back in 1991. There, a diverse collection of people were constantly morphing into one another. It was all pretty amazing, especially considering the amount of processing power (or lack thereof) that was available at the time.
As it relates to web design, morphing gained some steam back in Flash’s heyday. The software’s tweening feature made simple morph effects fairly easy. And now, the tradition continues in the form of MorphSVGPlugin.
The plugin, which works with the GSAP library, allows for morphing between shapes with relatively little code. It can automatically calculate the transition points between shapes and produce an incredibly smooth animation.
To see MorphSVGPlugin in action, I searched the archives of CodePen for the best of the best. But first, a fair warning: The effect is a bit mesmerizing. Sit back and enjoy the show (and don’t operate heavy machinery for at least 10 minutes afterwards)!
If you really want an illustration that shows you how MorphSVGPlugin works, this is it. You get to see the various shapes being used and then the final result.
See the Pen Frames & Layers with morphSVG by Shaw (@shshaw) on CodePen.
A Happy Troll
One look at this cute little emoji will…yikes…what is that thing? The element of surprise is evident here and I love that the background changes along with