• Stars
    star
    2,682
  • Rank 16,172 (Top 0.4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions. (THIS PROJECT IS NOT MAINTAINED ANYMORE)

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

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.

More Repositories

1

ngImgCrop

Image Crop directive for AngularJS (THIS PROJECT IS NOT MAINTAINED ANYMORE)
JavaScript
1,121
star
2

awesome-bitcoin-payment-processors

🌟 A curated list of Bitcoin payment processors enabling merchants, businesses and nonprofits to accept Bitcoin payments.
370
star
3

SVG-Circus

Create cool animated SVG spinners, loaders and other looped animations in seconds
JavaScript
309
star
4

DeBitpay

❇️ DeBitpay is a simple app which decodes Bitpay payment links into Bitcoin transaction requirements, so that you could make the payments with Bitcoin wallets not supporting Bitpay.
JavaScript
120
star
5

node-red-node-typescript-starter

🏁 Quick-start template repository for creating new Node-RED node sets in TypeScript.
JavaScript
76
star
6

One-Time-Address

🏷 A better way to share your Bitcoin address.
Handlebars
61
star
7

HD-Wallet-Scanner

❄️ Find all used addresses in your Bitcoin HD wallets bypassing gap limits.
JavaScript
20
star
8

StoreOfTime.com

⌚ Comparison of Bitcoin, Local Currency, USD, Gold and Silver as a Store of Time.
JavaScript
17
star
9

store-of-something

πŸ“ˆ Template repository for making "Store of {Something}" websites.
EJS
9
star
10

new-project

7
star
11

DeBitpay-Directory

πŸͺ Alternative places to spend Bitcoin without BitPay.
Nunjucks
7
star
12

DeBitpay-nodejs

DeBitpay is a simple app which decodes Bitpay payment links into Bitcoin transaction requirements, so that you could make the payments with Bitcoin wallets not supporting Bitpay. **NodeJS edition**
HTML
3
star
13

StoreOfBigMacs.com

πŸ”Find out how many Big Macs could a monetary value of a single Big Mac get over time when stored in Bitcoin, USD, Gold or Silver.
EJS
2
star
14

svgcircus.com

HTML
1
star