alexk111 / svg-morpheus Goto Github PK

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)

License: MIT License

JavaScript 100.00%

svg-morpheus's Introduction

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

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.

svg-morpheus's People

Contributors

Stargazers

Watchers

Forkers

arthurvondyck duyet evanknight carabina sskyy zsswebdesign w8r bdthemes artyom4d tyidnet yashilanka tazzkiller miguelevben neuroradiology pedromaltez-forks nvdnkpr msoftware jbusch nova423 guygunaratne marufsiddiqui aaaliua sharonzzxx thomassander kublaj netconstructor oligoform almendro karimabdul mvaso85 sirajgadhia cortesdev rockyspade frankie-666 vizantiyec freemansion andy737 umarmughal ravinthranath wbarahona hichnik kimpetersend1 katlavan maiar tungtouch kocokolo dmak78 fu4k6pingu kevinrodbe scene duyuhe hoshinosyouta clareli yanglyu mrkoal pitipongxyz wodeluck ronwe angularjschile hanrj andrenm weixu416 mminc glivera changalberto tgedikli mihaitanase digitallandes enelar conciergedebolso saurindashadia ashwin107 networkrepositories rolka kobegong motouzu michael-gabenna diaosir puginabox sdtm1016 zartata modulexcite candybud girihagama iamie6 maxavilov mumu-evanchen chiu canvax xianxingzhe reyhappen lamurga drawnword artosyadl jacklam718 thesunlover mmanyshev xiaobinwu abishekaditya lobsterbot

svg-morpheus's Issues

Webpack support

Firstly, great library.

Had a little issue using it with Webpack.

Installed using Bower
import SVGMorpheus from 'svg-morpheus';

However empty object was being returned. Ended up changing the default src file to the unminified version and exposing by - module.exports = SVGMorpheus

Is there a better way to import this file for use with Webpack?

Cheers

Clone is not defined svg-morpheus.js:231

I am trying to morph an svg

 var myIcons = new SVGMorpheus('#iconset')
 myIcons.to('icon1')

I am seeing the following error:

svg-morpheus.js:231 Uncaught ReferenceError: clone is not defined

I figured maybe this was jQuery's clone method you are trying to use so I included jQuery, but I am still having the same issue.

Need sample of your script

Dear, Alexk111. Help me pls.
I need morphing icon1 to icon2 by SVG-Morpheus. Whats wrong in my code and where i should to write options of morphing?

https://gist.github.com/anonymous/d29b9c16842dd7a43387

NPM distribution

Great library! Is there any chance we could publish this to NPM? We build off of webpack and mostly store our dependencies in npm, this is currently our only library in bower and it would be awesome to have one less config file. Thanks!

putting my svg code inside iconset and initializing breaks the svg

My svg looks just fine in a web browser when added normally. But when I add it to an icon set to make it work with SVG-Morpheus, it is no longer correct. I have an X form (made of 4 rectangles).

Here is the svg code that works:

but after adding the following to the iconset it shows as two horizontal lines when morphing or being morphed to:

Active transition on hover

Hey, i have 3 svg and i want that the transition happens only when i hover the svg and stops on mouseleave.
Can you help me?

If its possible, I want that when I hover it again, the transition continues where it was before.

Thanks,
Sandrina Pereira

Getting a console error in Safari

Live site (click on 'Get in Touch' at the top right)

The icon is supposed to morph but it throws out a console error:
TypeError: 'undefined' is not a function (evaluating 'u(this._rafid)')

Works okay in Chrome, FF, and IE, though. Btw, I'm on Windows.

Icon with multiple <g> elements

Hi,

thanks for your library that's awesome.

However, I encounter a problem with svg generated with illustrator, they contain multiple tag.
How should I proceed ?

Thanking you in advance.

what is SVG-Morpheus ?

Morph
vt. 在屏幕上变换图像；
Morpheus
n. <希神>摩尔莆神（睡梦之神），催眠物

Path getting modified at start / end of animation

Notice the home icon after animation start / before animation end:
http://plnkr.co/edit/AR1VQJ2KbmrCXXHWDwdC?p=preview

Specify browser support?

SVG Morpheus seems do not support animateTransform ?

SVG Morpheus is actually a awsome work !

However, It seems that SVGMorpheus do not support animateTransform?
the problem is as follows:
If I have the animated icons (refer:https://codepen.io/aurer/pen/jEGbA)
when I use SVGMorpheus to change between icons, The icon do not animate after changed.

How should I fix this problem?

Thanks!

callback can't excute

      <g id="share2">
          <ellipse class="share1" cx="44.667" cy="33.167" rx="6" ry="5.833"/>
          <circle class="share2" cx="49.333" cy="56" r="6"/>
          <circle class="share3" cx="33.208" cy="46.792" r="5.875"/>
          <path class="share4" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="M46.595,30.333 35.667,46.333 50.083,57"/>
      </g>

js:
var svgMorpheus = new SVGMorpheus('#icon'); svgMorpheus.to("#share1", {duration: 1000},function(){ alert("fuck") });

the morph can run correctly, but callback just can not excute

please help!

Shapes imported from Inkscape doesn't seem to work

I've made a simple shape in Inkscape and tried to load it with SVG-Morpheus but with no effect - nothing has shown up and no error was fired. SVG looked like this:

  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="color:#000000;fill:#9955ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.20000076;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="m 0,1042.3622 10,0 0,10 -10,0 z"
       id="rect2985" />
    <path
       style="color:#000000;fill:#ff7f2a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.20000076;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="m 10,1042.3622 10,0 0,10 -10,0 z"
       id="rect2985-7" />
    <path
       style="color:#000000;fill:#5fd35f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.20000076;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="m 0,1032.3622 10,0 0,10 -10,0 z"
       id="rect2985-6" />
    <path
       style="color:#000000;fill:#d35f5f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.20000076;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="m 10,1032.3622 10,0 0,10 -10,0 z"
       id="rect2985-5" />
  </g>

I believe the problem is the 'd' attribute structure. Library seems to have a problem with different than expected formatting, I think it expects capital letters and no spaces in some cases.

SVG Morpheus has a issue with morph

http://codepen.io/dalisoft/pen/qOQrwz

When countdown for 5,4,3,2,1,0 morphing not smooth

UPDATE: Discussion here, http://greensock.com/forums/topic/13157-svg-morph-difference/

support svg fonts

I really like SVG-morpheus and wanted to use it. Sadly, the way our icons are used is as a font and thus, no svg elements exist for svg-morpheus to manipulate.
Do you have plans to support svg fonts or do you have recommendations/hints/tipps how to convert them so they can be used by svg-morpheus?

How can I get the svg paths in the morpheus-transform process?

I'm an Android developer, not a web developer,and I know little about javascript.I saw the delight detail in google's Material Design guidelines,so I hope to make some similar buttons.What I want is to capture a set of svg paths in the process.Should I use the follow code in function "SVGMorpheus.prototype._updateAnimationProgress" (Line 362)in "\source\js\svg-morpheus.js"?

console.log(this._curIconItems[i].path);

3Q,my email:[email protected]

Can't read property 'items' of undefined.

I can't seem to get this to work. What happens is that it defaults to last group in my svg file and on animation end I gets a "can't read property 'items' of undefined". Not sure why it happens but it's line 1419 in the script. Code:

var iconSet = new SVGMorpheus('#icon');
iconSet.to('burger-menu');

and my svg file (tried with the one you have in your project as well)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g id="back-arrow">
    <path fill="#FFFFFF" d="M30.973,50.5l3.083-3.289L21.723,34.262H50.5v-4.522H21.723L34.057,16.79l-3.083-3.29L13.5,32L30.973,50.5
        L30.973,50.5z"/>
</g>
<g id="burger-menu">
    <path fill="#FFFFFF" d="M0,8.167v9.6h63.999v-9.6H0L0,8.167z M0,36.967h63.999v-9.6H0V36.967L0,36.967z M0,56.166
        h63.999v-9.6H0V56.166L0,56.166z"/>
</g>

and my html

<object data="../res/icons.svg" type="image/svg+xml" id="icon"></object>

It only ever uses a default animation to set the last group in the svg and after what I assume is 750ms (default animationtime) if says that items is undefined.

Npm publish

It looks like the latest version on NPM doesn't match the latest version on github releases. Could you do an npm publish? Would be very useful for the new main entry point (webpack support).

Need it more module friendly

In the code, svg-morpheus is just using 'var SVGMorpheus', and this breaks module system.

Why not use

var SVGMorpheus = ...
try {
module.exports = SVGMorpheus
} catch(e){}

IE 9 : SCRIPT5007: lack object svg-morpheus.js, line1 char 21715 u(this._rafid),

IE 9
SCRIPT5007: lack object svg-morpheus.js, line1 char 21715

u(this._rafid),

beacause of project, I am trying to fix compatibility

I wonder how to fix this error? thank you

Why the morphing is so ugly?

Why the morphing/tweening is so ugly?
For a better morphing algorithm you should check this article:
http://tympanus.net/Development/AnimatedSVGIcons/

It uses Snap.svg with the following code:

myIconName : { 
    url : 'svgs/myIconName.svg',
    animation : [
        { 
            el : 'path:nth-child(5)', 
            animProperties : { 
                from : { val : '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,19.897984 z"}', animAfter : '{"stroke" : "#000"}' }, 
                to : { val : '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,-19.7269617 z"}', animAfter : '{"stroke" : "#444"}' }
                } 
        },
        { 
            el : 'rect:nth-child(3)', 
            animProperties : { 
                from : { val : '{"transform" : "t0 0"}', after : '{ "opacity" : 0 }' }, 
                to : { val : '{"transform" : "t-10 -10"}', before : '{ "opacity" : 1 }' }
            } 
        }
]
}

The "path" element that you see in the above code is just the content of the svg file, as explained in the text of the article:
http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/

Why does your library seem to interpolate the shapes incorrectly?

"SVGMorpheus is not defined" in angular directive

I have added the library to the page but when i do something like this:

 .directive('myDirective', function () {
            return {
                template: '<content-tag></content-tag>',
                link: function (scope, element, attr) {
                        var myIcons = new SVGMorpheus('#pinkFrames', { iconId: 'pinkFrame1'});
                        myIcons.to('#pinkFrame2', {}, null);
                   }
                }
            }
        });

I get:

SVGMorpheus is not defined ReferenceError: SVGMorpheus is not defined