Material Design's Delightful Details with SVG Morpheus

2014-11-27 00:00:00 +0000 by Alex R. Young


SVG Morpheus (GitHub: alexk111/SVG-Morpheus, License: MIT, Bower: svg-morpheus) by Alex Kaul is a library for morphing between SVG icons. It implements the delightful details transition, as described by Google's material design documentation:

The most basic use of animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the obvious. A menu icon that becomes an arrow or playback controls that smoothly change from one to the other serve dual functions: to inform the user and to imbue your app with a moment of wonder and a sense of superb craftsmanship. Users do notice such small details.

You might have noticed this in Android recently: the first-party Android apps now have a nice transition for the back icon. This is visible in the Play Store app, for example.

Alex's library allows you to do this with SVG icons, so you can employ the same effects in your web apps. All you need to do is add an SVG icon set to a document, then instantiate SVGMorpheus:

var myIcons = new SVGMorpheus('#myIconSet', options, callback);

The options include easing and duration, so you get some control over the transition.

The project's documentation has more details on the API and the expected markup structure.