SVG Morpheus
WARNING
THIS PROJECT IS NOT MAINTAINED ANYMORE. You are free to fork it and start a new project.
Overview
JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions.
Live demo
Installing
Using SVG Morpheus with a CDN
CDN provided by cdnjs
<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script>
Download
You have the following options to install the library:
- Download SVG Morpheus from GitHub.
- Use NPM
npm install svg-morpheus
. - Use Bower
bower install svg-morpheus
.
Add Script
Simply add the svg-morpheus.js script to your website/application. No other scripts are needed. Both the minified and uncompressed (for development) versions are in the /compile folder.
<script src="svg-morpheus.js"></script>
Usage
- Add an icon set SVG to the HTML file where you want to show the morphing icon.
- Create a SVG Morpheus instance for the icon set by calling
new SVGMorpheus(element)
. Object/IFrame/Inline SVG element containing the icon set. Can be a DOM element or a CSS query selector.. For example:
var myIcons = new SVGMorpheus('#myIconSet');
- After initializing, you get a SVGMorpheus object having
to(ID)
function. ID is an id of Icon in the icon set. Use it to morph the icon to another icon in the icon set.
myIcons.to('icon1');
Functions
SVGMorpheus Constructor
Creates a SVGMorpheus instance.
var myIcons = new SVGMorpheus(element, options, callback);
element - Object/IFrame/SVG element containing an icon set. Can be a DOM element or a CSS query selector.
options - Optional. Object specifying default options.
options.iconId - Optional. Id of an icon shown after initialization. Default: last icon in the icon set.
options.duration - Optional. Set a default duration for transition animations, in msec. Default: 750.
options.easing - Optional. Set a default easing for transition animations. Default: quad-in-out.
options.rotation - Optional. Set a default rotation for icon shapes. clock
= clockwise, counterclock
= counterclockwise, random
= randomly set clock/counterclock, none
= no rotation. Default: clock.
callback - Optional. Set a default callback function to call at the animation end.
SVGMorpheus.to()
Morphs the icon to another one.
myIcons.to(iconId, options, callback);
iconId - Id of an icon to transition to.
options - Optional. Object specifying the animation options.
options.duration - Optional. Set a duration for the animation, in msec.
options.easing - Optional. Set an easing for the animation.
options.rotation - Optional. Set a rotation for icon shapes. clock
= clockwise, counterclock
= counterclockwise, random
= randomly set clock/counterclock, none
= no rotation.
callback - Optional. Set a callback function to call at the animation end.
SVGMorpheus.registerEasing()
Registers a custom easing function. SVGMorpheus has a set of predefined easing functions for the morph animation (goes below). If you want to use your own easing, use this function to do that.
myIcons.registerEasing(name, fn);
name - Name of an easing function you want to register.
fn - Easing function. function easing(timing)
gets a float 0<=timing<=1
argument as an input, and outputs float 0<=progress<=1
.
Predefined easing functions
circ-in
, circ-out
, circ-in-out
, cubic-in
, cubic-out
, cubic-in-out
, elastic-in
, elastic-out
, elastic-in-out
, expo-in
, expo-out
, expo-in-out
, linear
, quad-in
, quad-out
, quad-in-out
, quart-in
, quart-out
, quart-in-out
, quint-in
, quint-out
, quint-in-out
, sine-in
, sine-out
, sine-in-out
Icon Set structure
SVG should have the following structure to be a valid icon set:
- 1st tier nodes are
<g>
elements having 'id' attribute. They define icons in the icon set. - 2nd tier nodes are shape elements (
<path>
,circle
,rect
,ellipse
,polygon
,line
). They define the icon graphics.
<svg> <g id="icon1"> Shape elements </g> <g id="icon2"> Shape elements </g> </svg>
Example code
Check the Demos directory for examples.
Supported browsers
Chrome Firefox IE >= 10 Safari Opera iOS Safari Android Browser >= 4.4 Chrome for Android
License
See the LICENSE file.