Morphing Between SVG Shapes With JavaScript – morpher

Category: Animation , Javascript | January 11, 2019
Author: whitecube
Views Total: 92
Official Page: Go to website
Last Update: January 11, 2019
License: MIT

Preview:

Morphing Between SVG Shapes With JavaScript – morpher

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

You Might Be Interested In:

Leave a Reply