Author: | whitecube |
---|---|
Views Total: | 850 views |
Official Page: | Go to website |
Last Update: | January 11, 2019 |
License: | MIT |
Preview:

Description:
Just another JavaScript plugin for SVG path animation that morphs an SVG shape to another when triggered.
Install & Download:
# NPM $ npm install morpherjs --save
How to use it:
Create a new Morpher object and specify the SVG path you want to animate.
let myMorpher = new Morpher(document.getElementById('path-ID'), { // the duration of the animation duration: 500, // the number of times an animation cycle should be played before stopping (-1 = infinite) iterations: -1, // whether the morpher should animate back to its initial state at the end of an iteration alternate: true, // the animation easing function easing: (t) => { return t<.5 ? 2*t*t : -1+(4-2*t)*t; }, // the amount of decimals we should output in the interpolated SVG paths decimals: 3 });
API methods.
// updates the duration myMorpher.setDuration(500) // updates the iterations myMorpher.setIterations(-1) // updates the morpher's alternation mode. myMorpher.setAlternate(true) // updates the easing function myMorpher.setEasing(function) // adds a new SVG path myMorpher.addStep(string) // adds an array of SVG paths myMorpher.addSteps(array) // starts the animation myMorpher.play(timestamp = Date.now()) // pauses the animation myMorpher.pause() // stops the animation myMorpher.stop()