Getting Started with Popmotion

Popmotion is a simple animation library for delightful user interfaces : the small Swiss Army knife for animators and UI developers. Find out more at https://popmotion.io.

Setup

Like many other libraries, using NPM is the best way to install popmotion as a dependency.

npm install popmotion

Morph two shapes

To create a simple morphing effect, we just need two SVG shapes: in this example the .origin shape will morph into the .target shape in 800ms, no less, no more.

Markup

Define the shapes in your document.

<svg viewBox="0 0 100 100" class="origin">
  <path d="M15 15h70v70H15z"/>
</svg>

<svg viewBox="0 0 100 100" class="target">
  <path d="M30 50l20-20 20 20-20 20z"/>
</svg>

Tween

Now, you need to use the interpolate method to prepare the shapes to morph. As you can see, popmotion is using the d attribute to update the shape path. You can improve the rendering by adjusting the paths options.

import * as Polymorph from 'polymorph-js';
import * as Popmotion from 'popmotion';

// get the shape where you want the morphing to be done
const shape = Popmotion.styler(document.querySelector('.origin'));

// create the morphing effect between the two paths
const morph = Polymorph.interpolate([
  '.origin path',
  '.target path'
]);

// play the tween morphing effect
Popmotion.tween({
  duration: 800
}).pipe(morph).start(shape.set('d'));

Note that the path where the morphing is done can be any valid path in your document