Morphing Between SVG Shapes With JavaScript – morpher

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()