SVG tween
Animate between SVG shapes.
8.6kb gzipped.
Note: Wilderness has superseded this library and I'd highly recommend trying that instead.
Polyfill generators
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
View basic shapes example code
Installation
npm install svg-tween
Usage
SVG tween has two functions – tween
and tweenPaths
.
tween
The tween
function takes all the same options as
Tweening's tween
function.
However, the from
and to
options take the form of
SVG shape objects.
// The shape we want to animate fromconst from = type: 'path' d: 'M5,50L80,60v40,l-15,10l-15,-10z' // The shape we want to animate toconst to = type: 'rect' width: 100 height: 100 x: 50 y: 50 // Create a new path nodeconst path = document // Set the node's initial d attribute to match the from shapepath // Add the path node to the domdocument // Let's move!// On each frame our next callback is run// this is where we update our path node's d attribute
tweenPaths
The tweenPaths
function is much the same as tween
, except
it takes d
attribute strings as it's from
and to
options.
// The path we want to animate fromconst from = 'M5,50L80,60v40,l-15,10l-15,-10z' // The path we want to animate toconst to = 'M50,50h100v100h-100Z' // Create a new path nodeconst path = document // Set the node's initial d attribute to match frompath // Add the path node to the domdocument // Let's move!// On each frame our next callback is run// this is where we update our path node's d attribute
Morphing multiple shapes
The tween
and tweenPaths
functions can also accept an
array of shape objects, or d
attribute strings respectively.
This allows us to tween groups of SVG shapes in one function
call.
// The paths we want to animate fromconst from = 'M0,0h10v10h-10z' 'M10,10h10v10h-10z' // The paths we want to animate toconst to = 'M0,0l10,5l-10,5z' 'M10,10l10,5l-10,5z' // Create two new path nodesconst paths = document document paths
CommonJS
This is how you get to the good stuff if you're using
require
.
const SVGTween = const tween = SVGTweendefaultconst tweenPaths = SVGTweentweenPaths
UMD
And if you just want to smash in a Javascript file you're also covered. Drop this in place ...
https://unpkg.com/svg-tween/dist/svg-tween.min.js
Then access it on the SVGTween
global variable.
const tween = SVGTweendefaultconst tweenPaths = SVGTweentweenPaths
Size
A size comparison of libraries that allow morphing of SVG shapes (with differing number of points).
Library | Size |
---|---|
SVG tween | 6.8kb |
SVG Morpheus | 7.2kb |
SnapSVG | 26kb |
RaphaelJS | 32kb |
GreenSock TweenMax + morphSVG plugin | 41.5kb |
Bonsai | 43kb |
D3 | 52kb |
If you know of any others, please open an issue or even better – submit a pull request.
Help make this better
Issues and pull requests gratefully received!
I'm also on twitter @colinmeinke.
Thanks 🌟
License
ISC.