Smooth SVG Path Morphing with flubber

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it.

Installation per npm:

npm install flubber

Note that flubber only calculates the interpolated data:

import { interpolate } from "flubber";

const triangle = "M1,1 L2,1 L1.5,2 Z";
const pentagon = [[0, 0], [1, 1], [3, 1], [2, 0.5], [0, 1]];

const interpolator = interpolate(triangle, pentagon);

interpolator(0); // returns the SVG triangle path string
interpolator(0.5); // returns something halfway between the triangle and the pentagon
interpolator(1); // returns the SVG pentagon path string

To actually animate the SVG path you’ll need to call interpolator yourself on a timed interval, and set the path data to the returned result.

// Animate with a duration of 1250ms
animateOverTime(1250, (progress) => {
    myPathElement.setAttribute("d", interpolator(t));
});

This looks like a great thing to combine with some easing functions 😉

flubber (GitHub) →