{"_id":"svg-morpheus","_rev":"8-2be3ee09c632170beeeba3e04458fed0","name":"svg-morpheus","time":{"modified":"2022-06-27T02:34:33.681Z","created":"2015-12-23T18:42:43.483Z","0.1.8":"2015-12-23T18:42:43.483Z","0.0.1-security":"2016-05-09T17:22:29.386Z","0.3.0":"2016-05-10T00:03:07.929Z"},"maintainers":[{"name":"ehsalazar","email":"ernie@npmjs.com"}],"dist-tags":{"latest":"0.3.0"},"description":"JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions.","readme":"# SVG Morpheus\r\n\r\nJavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's [Delightful Details](http://www.google.com/design/spec/animation/delightful-details.html) transitions.\r\n\r\n## Live demo\r\n\r\n[Launch Live Demo](http://alexk111.github.io/SVG-Morpheus/)\r\n\r\n## Installing\r\n\r\n### Using SVG Morpheus with a CDN\r\n\r\nCDN provided by [cdnjs](https://cdnjs.com/libraries/SVG-Morpheus)\r\n```\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js\"></script>\r\n```\r\n\r\n### Download\r\n\r\nYou have two options to get the library:\r\n- [Download SVG Morpheus](https://github.com/alexk111/SVG-Morpheus/archive/master.zip) from GitHub.\r\n- Use Bower to download the library. Just run `bower install svg-morpheus` in the directory you want to download the files to.\r\n\r\n### Add Script\r\n\r\nSimply 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.\r\n\r\n```html\r\n<script src=\"svg-morpheus.js\"></script>\r\n```\r\n\r\n## Usage\r\n\r\n1. Add an icon set SVG to the HTML file where you want to show the morphing icon.\r\n2. 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:\r\n\r\n```javascript\r\nvar myIcons = new SVGMorpheus('#myIconSet');\r\n```\r\n\r\n3. 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.\r\n\r\n```javascript\r\nmyIcons.to('icon1');\r\n```\r\n\r\n\r\n## Functions\r\n\r\n### SVGMorpheus Constructor\r\n\r\nCreates a SVGMorpheus instance.\r\n\r\n```javascript\r\nvar myIcons = new SVGMorpheus(element, options, callback);\r\n```\r\n\r\n**element** - Object/IFrame/SVG element containing an icon set. Can be a DOM element or a CSS query selector.\r\n\r\n**options** - *Optional*. Object specifying default options.\r\n\r\n**options.iconId** - *Optional*. Id of an icon shown after initialization. Default: last icon in the icon set.\r\n\r\n**options.duration** - *Optional*. Set a default duration for transition animations, in msec. Default: 750.\r\n\r\n**options.easing** - *Optional*. Set a default easing for transition animations. Default: quad-in-out.\r\n\r\n**options.rotation** - *Optional*. Set a default rotation for icon shapes. `clock` = clockwise, `counterclock` = counterclockwise, `random` = randomly set clock/counterclock, `none` = no rotation. Default: clock.\r\n\r\n**callback** - *Optional*. Set a default callback function to call at the animation end.\r\n\r\n\r\n### SVGMorpheus.to()\r\n\r\nMorphs the icon to another one.\r\n\r\n```javascript\r\nmyIcons.to(iconId, options, callback);\r\n```\r\n\r\n**iconId** - Id of an icon to transition to.\r\n\r\n**options** - *Optional*. Object specifying the animation options.\r\n\r\n**options.duration** - *Optional*. Set a duration for the animation, in msec.\r\n\r\n**options.easing** - *Optional*. Set an easing for the animation.\r\n\r\n**options.rotation** - *Optional*. Set a rotation for icon shapes. `clock` = clockwise, `counterclock` = counterclockwise, `random` = randomly set clock/counterclock, `none` = no rotation.\r\n\r\n**callback** - *Optional*. Set a callback function to call at the animation end.\r\n\r\n### SVGMorpheus.registerEasing()\r\n\r\nRegisters 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.\r\n\r\n```javascript\r\nmyIcons.registerEasing(name, fn);\r\n```\r\n\r\n**name** - Name of an easing function you want to register.\r\n\r\n**fn** - Easing function. ```function easing(timing)``` gets a float ```0<=timing<=1``` argument as an input, and outputs float ```0<=progress<=1```.\r\n\r\n## Predefined easing functions\r\n\r\n`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`\r\n\r\n\r\n## Icon Set structure\r\n\r\nSVG should have the following structure to be a valid icon set:\r\n\r\n- 1st tier nodes are `<g>` elements having 'id' attribute. They define icons in the icon set.\r\n- 2nd tier nodes are shape elements (`<path>`, `circle`, `rect`, `ellipse`, `polygon`, `line`). They define the icon graphics.\r\n\r\n```xml\r\n<svg>\r\n  <g id=\"icon1\">\r\n    Shape elements\r\n  </g>\r\n  <g id=\"icon2\">\r\n    Shape elements\r\n  </g>\r\n</svg>\r\n```\r\n\r\n\r\n## Example code\r\n\r\nCheck the Demos directory for examples.\r\n\r\n\r\n## Supported browsers\r\n\r\nChrome\r\nFirefox\r\nIE >= 10\r\nSafari\r\nOpera\r\niOS Safari\r\nAndroid Browser >= 4.4\r\nChrome for Android\r\n\r\n\r\n## License\r\n\r\nSee the [LICENSE](https://github.com/alexk111/SVG-Morpheus/blob/master/LICENSE) file.\r\n","versions":{"0.0.1-security":{"name":"svg-morpheus","version":"0.0.1-security","description":"This package name is not currently in use, but was formerly occupied by another package. To avoid malicious use, npm is hanging on to the package name, but loosely, and we'll probably give it to you if you want it.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/npm/security-holder.git"},"keywords":[],"author":"","license":"ISC","bugs":{"url":"https://github.com/npm/security-holder/issues"},"homepage":"https://github.com/npm/security-holder#readme","_id":"svg-morpheus@0.0.1-security","_shasum":"17d02de9324762951202767f1a467931b949389e","_from":".","_npmVersion":"3.5.2","_nodeVersion":"4.1.2","_npmUser":{"name":"ehsalazar","email":"ernie@npmjs.com"},"dist":{"shasum":"17d02de9324762951202767f1a467931b949389e","tarball":"https://registry.npmjs.org/svg-morpheus/-/svg-morpheus-0.0.1-security.tgz","integrity":"sha512-Dek5tOLx8Upd3wKFD5dRSRYzPVyJ+YMYOTnd8aqUodMQjrVfEq7R+RQVaP/lxli5INbL3hnRw98TCnJqJPg/3A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5gdXuyfME+gEIR/drV6Ef5OU6XU6Z1FWbefN/7w4anAiA62gajehxq1SUyjz3DhwYhgCj5Ba7k0ujN5aikIWL2+Q=="}]},"maintainers":[{"name":"ehsalazar","email":"ernie@npmjs.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/svg-morpheus-0.0.1-security.tgz_1462814548949_0.25681107048876584"}},"0.3.0":{"author":{"name":"Alex Kaul","email":"alexkaul@googlemail.com"},"name":"svg-morpheus","prettyName":"SVG Morpheus","version":"0.3.0","description":"JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions.","homepage":"https://github.com/alexk111/SVG-Morpheus","repository":{"type":"git","url":"git+https://github.com/alexk111/SVG-Morpheus.git"},"license":"MIT","dependencies":{},"devDependencies":{"connect-livereload":"^0.4.0","express":"^4.4.5","gulp":"^3.8.5","gulp-autoprefixer":"0.0.8","gulp-concat":"^2.2.0","gulp-concat-util":"^0.2.3","gulp-header":"^1.0.2","gulp-jshint":"^1.6.4","gulp-livereload":"^2.1.0","gulp-open":"^0.2.8","gulp-rimraf":"^0.1.0","gulp-uglify":"^0.3.1","gulp-util":"^2.2.19","jshint-stylish":"^0.2.0","minimist":"^0.2.0","opn":"^0.1.2","tiny-lr":"0.0.7"},"bugs":{"url":"https://github.com/alexk111/SVG-Morpheus/issues"},"_id":"svg-morpheus@0.3.0","scripts":{},"_shasum":"75785df183a9cb717e0bffe29c678965964275a6","_from":".","_npmVersion":"3.8.2","_nodeVersion":"4.4.1","_npmUser":{"name":"alexkaul","email":"alexkaul@googlemail.com"},"dist":{"shasum":"75785df183a9cb717e0bffe29c678965964275a6","tarball":"https://registry.npmjs.org/svg-morpheus/-/svg-morpheus-0.3.0.tgz","integrity":"sha512-HrUPkLLFBQc4LW85RnkxD0IR5fqb8nt+vIiqKjYri6Ssr0XqvPTtDrcDxKumA4KMdjVh+yJzF3enimdqohrPtA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKSwvTbMsjnxqnAcbvdH9ASBOrdVdHZvcb5ClmeF6FcQIgPSf1KibmcbMuxv//F/J/iZsOkhSzewevSJjgVDZQI5k="}]},"maintainers":[{"name":"ehsalazar","email":"ernie@npmjs.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/svg-morpheus-0.3.0.tgz_1462838585260_0.0769045113120228"}}},"homepage":"https://github.com/alexk111/SVG-Morpheus","repository":{"type":"git","url":"git+https://github.com/alexk111/SVG-Morpheus.git"},"bugs":{"url":"https://github.com/alexk111/SVG-Morpheus/issues"},"license":"MIT","readmeFilename":"README.md","author":{"name":"Alex Kaul","email":"alexkaul@googlemail.com"},"users":{"xenira":true}}