Package Exports

svg-tween

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-tween) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SVG tween

Animate between SVG shapes.

5.4kb gzipped.

However, you're currently also going to have to bring babel polyfill to the party at an additional 30.8kb gzipped. This is to support Javascript generators which a dependency of this library makes use of.

Examples

Basic shapes example

View basic shapes example code

Batman example

View batman example code

Line example

View line example code

Installation

npm install svg-tween

Usage

To tween between different SVG shapes use tween. Take a look at the SVG shapes getPoints function to understand the format the from and to options expect to receive.

import tween from 'svg-tween';

tween({
  from: {
    shape: 'path',
    d: 'M5,50L80,60v40,l-15,10l-15,-10z',
  },
  to: {
    shape: 'rect',
    width: 100,
    height: 100,
    x: 50,
    y: 50,
  },
  next: d => console.log( `Update SVG path to ${ d }` ),
});

Or if you're just tweening between paths then use the tweenPaths function, passing in SVG path d attributes as the from and to options.

import { tweenPaths } from 'svg-tween';

tweenPaths({
  from: 'M5,50L80,60v40,l-15,10l-15,-10z',
  to: 'M50,50h100v100h-100Z',
  next: d => console.log( `Update SVG path to ${ d }` ),
})

Notes

SVG tween uses SVG shapes and Tweening under the hood.

Both tween and tweenPath functions take the same arguments as Tweening's tween function, but with modified from and to options.