wtc-tween provides a way to create simple tweens without the need for a massive library.
npm install wtc-tweenwtc-tween provides a way to create simple tweens without the need for a massive library.
npm i wtc-tween
``js`
tween(from: Number|Array[Numbers], to: Number|Array[Numbers], callback: Function, options: Object);
from: _Number_ or _Array[Numbers]_
If passing an array of numbers, make sure that from and to have the same order and length.
to: _Number_ or _Array[Numbers]_
callback: _Function_
Receives the _Number_|_Array[Numbers]_ current value.
options: _Object_
options.duration: _Number_ - default 1000
The duration in miliseconds for the tween.
options.timingFunction: _Function_ - default easings.linear
The timing function to be used by the tween.
options.onComplete: _Function_ - default null
A function to be called after completion of the tween.
`js
import tween from "wtc-tween";
tween(0, 1, (value) => {
// Do stuff with value
});
`
`js
import tween from "wtc-tween";
tween([0, 50, 2100], [1, 200, 1000], (value) => {
for (let val of value) {
// Do stuff with value
}
});
`
js
const mytween = tween(0,1);
// whenever you need to cancel
cancelAnimationFrame(mytween);
`$3
js
import tween, { easing } from "wtc-tween";tween(
0,
1,
(value) => {
// Do stuff with value
},
{
duration: 400,
timingFunction: easing.sineOut,
}
);
`Easings
This library also comes with some basic easing functions included but feel free to use other easing libraries like easing-functions.
$3
- linear
- sineIn
- sineOut
ES5 and browsers
You can also use this in the browser but you will still need
and npm to compile this project.1. Clone this repo
2.
cd into the directory
3. Install deps with npm i
4. Build the lib with The files will be compiled to the
folder.$3
For older browsers use the file
dist/wtc-tween.umd.jshtml
`$3
If targetting browsers that support modules, use
:`html
``