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 the character.
See the Pen Awesome Troll by Jon Kantner (@jkantner) on CodePen.
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.
See the Pen Flame by Sarah Drasner (@sdras) on CodePen.
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.
See the Pen SVG Pendant Lamp ( GSAP ) by Diaco M.Lotfollahi (@MAW) on CodePen.
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.
See the Pen SVG Wars: May the morph be with you. by Craig Roblewsky (@PointC) on CodePen.
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.
See the Pen MorphSVG in Button on Click by Geoff Graham (@geoffgraham) on CodePen.
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.
See the Pen Environment Impact Cards (GSAP) by Anton Mudrenok (@mudrenok) on CodePen.
Enough practicality – this one is just plain fun. Sarah Drasner’s “Interchangeable Hipster” features morphing eyewear and facial hair. Far out!
See the Pen Interchangable Hipster by Sarah Drasner (@sdras) on CodePen.
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.
See the Pen Underneath by GRAY GHOST (@grayghostvisuals) on CodePen.
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.
See the Pen SVG Device Animation by David Bachmann Johannesson (@dbj) on CodePen.
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 CodePen collection for more examples.
The post 10 Magnificent Code Examples of Morphing SVGs appeared first on Speckyboy Web Design Magazine.
The program targets and has a duration of hours divided on sessions and has supplementary learning materials. This course has been initially developed by / Inst. Title, as part of a partnership with Udemy ®.
Description. This course is just one of a series about ‘ ’, which introduces you to the complete skills and tools you need to study effectively about 10 Magnificent Code Examples of Morphing SVGs online.
Become an effective online learner and develop your online communication skills, explore new interests and career opportunities and learn to code or develop your programming skills by having this online development course, from beginner to advanced level.