Lightweight tweening library for all your tweening and animation needs.
npm install tweenkleLightweight tweening library built for modern Javascript environments that favor
small modular components over heavy monolithic bundled libraries.
In addition to the Tween class, this library contains
all of the Robert Penner easing equations as
direct exports for each variation, allowing you to use them in your site or app,
without all the overhead of having to load the entire library. More information
on the available eases is available below.
Might as well get this out of the way early, since I’m sure a lot of people will
say, "Why the f@€k did you bother to write another tweening library, THERE ARE
SO MANY!!!!1!!1!". Well, you’re right, I didn't have to write this, and there are
plenty of options out there, but this is part a personal exercise, while also
being the library that I need 90% of the time and is setup to work nicely in ES6
environments.
Via npm
``sh`
npm install --save tweenkle
Via Yarn
`sh`
yarn add tweenkle
Being that this library is targeted towards modern environments, it assumes that
the browsers running this code support requestAnimationFrame. If you need to
support browsers that don’t support that, be sure to include a polyfill so that
this will work in those browsers.
#### Parameters
* start - Initial value you would like to tween from.
* end - Target value to tween to. Once reached, the tween completes.
* duration:Number - How long the tween will run for in milliseconds. (Default: 1000)
* ease:Function - Easing function/equation used to manipulate the value while tweening. (Default: Linear)
* delay:Number - _Currently not implemented, but exploring how this could be used._ (Default: 0)
#### Properties
* active:Boolean - Whether or not the instance is tweening.
* complete:Boolean - Whether or not the tween has completed.
#### Methods
* start() - Start the tween.
* stop() - Stop the tween.
#### Events
* tick - Fired while the Tween is tweening.
* complete - Fired when the tween completes.
#### Example
`js
import Tween, { Easing } from 'tweenkle';
const tween = new Tween({
start: 0,
end: 100,
duration: 1000,
ease: Easing.Quad.InOut,
});
tween.on('tick', ({start, end, duration, progress, ease, value}) => {
// Manipulate element or variable based on tween value
});
tween.on('complete', ({start, end, duration, progress, ease, value}) => {
// Tween is done, do whatever you want here, or not. Events are optional.
});
tween.start();
`
For the visual people out there, I wrote a quick easing visualizer
so you can preview what the easing equation looks like before you use it.
* Back
*
*
*
* Bounce
*
*
*
* Circ
*
*
*
* Cubic
*
*
*
* Elastic
*
*
*
* Linear
* Quad
*
*
*
* Quart
*
*
*
* Quint
*
*
*
* Sine
*
*
*