The newer anime.js library has shape morphing built in. SnapSVG is, in a sense, Raphaël’s older brother, which could do things like this: anime.js
MORPHEUS PHOTO ANIMATION SUITE MOVE PICTURE MOVIE
Here’s a little movie showing some of them off: Codrops has excellent examples of this in action. SnapSVG’s animate() function will animate an SVG element’s properties, including path data. If you’re a user of Adobe Muse, you might be interested in the Muse Morph widget which combines Illustrator, Muse, and Greensock MorphSVG. See the Pen Morph Machine by Chris Coyier ( 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 Morphing SVG Slider – 20th Century Women by Sullivan Nolan ( on CodePen. It does so performantly, in a safe cross-browser fashion, and gives you more fine grain control over how the animation goes down. Unlike almost any other shape morphing method, it can tween between shapes of any number of points. It’s our way of showing our gratitude to those who are fueling innovation at GreenSock. MorphSVGPlugin is a bonus plugin for Club GreenSock members (“Shockingly Green” and “Business Green” levels). Moving right along to probably the most robust possible option, Greensock’s MorphSVG is a powerhouse. To get a feel for the must have same # of points thing, you might enjoy playing with Shape Shifter: MorphSVG (Greensock GSAP Plugin) 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. See the Pen Sitepoint Challenge #1 in SVG and SMIL by Noah Blon ( on CodePen. I wouldn’t suggest doing important work in SMIL but it is OG shape morphing. 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. The original, native technology for shape morphing is SMIL.
Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.
There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own.
Shape morphing, being a thing on the web, is no different. To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web.
0 kommentar(er)
