Get 10 Free 
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)!
Simple Shapes
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.
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 the character.
Like Moth to Flame
Morphing is not only useful for surprise effects. It can also help to recreate natural effects, like this candle’s flame.
Swinging Light
This fun example of a draggable light shows some subtle morphing technique. Notice how the perspective of the object changes as it moves up and down.
May the Morph Be With You
Star Wars just seems like a perfect subject (and excuse) to play around with MorphSVGPlugin. Here, we see popular visuals and characters morph in this very slick production.
A Practical Use
While it’s great fun to see the more experimental uses of morphing, this example demonstrates its practicality. Clicking on the button produces a useful microinteraction that just happens to include a morphing icon.
Environmental Impact
Here we have an attractive card layout that uses morphing icons to show the impact that paper receipts have on our environment. The animation helps to drive the point home.
Hipster History
Enough practicality – this one is just plain fun. Sarah Drasner’s “Interchangeable Hipster” features morphing eyewear and facial hair. Far out!
Into the Wild
At first glance, this animation doesn’t appear to have a lot going on. But a closer look reveals tons of subtle, natural-looking movements. This is a good reminder that morphing doesn’t always have to be big and flashy.
Being Responsive
Lastly, here’s a morphing animation we designers can relate to. Watch as the iMac turns into a laptop, then a tablet, then…well, you get the picture.
Mighty Morphing
The examples above show that morphing effects can be useful in a number of ways. Sure, they can be silly and fun. But they can also serve as a means to subtly attract a user’s attention. Regardless of how you use them, they’re a great way to show off your creativity.
Interested in seeing more? Check out MorphSVGPlugin’s collection for more examples.
Related Topics
Top