JavaScript library enabling SVG icons to morph from one to the other. Support Javascript framework.
Branch: master
Clone or download
Pull request Compare This branch is 2 commits ahead of alexk111:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
compile
demos
source/js
.gitattributes
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

SVG Morpheus

Import SVG-Morpheus

Added support for Javascript framework You can simply use import to get this library now

import SVGMorpheus from "svg-morpheus"

myIcon = new SVGMorpheus('#svg')
myIcon.to('icon2')

Overview

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions.

Live demo

Launch 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

  1. Add an icon set SVG to the HTML file where you want to show the morphing icon.
  2. 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');
  1. 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.