Lightweight JavaScript (ES6) tweening engine
MIT License
Lightweight JavaScript (ES6) tweening library.
EXAMPLES
DOCUMENTATION
Make tweening usage convenient and powerful. There are certain things that we were following while developed this library, we wanted to make it:
The library is only
9.08 Kb (3Kb gzip)
It uses optimization patterns to speed up & smooth animation.
The library is written in
ES6
, compiled to ES5 for global browsers support and providesES6 API
.
$ npm install between.js
<script src="https://rawgit.com/sasha240100/between.js/master/build/between.js"></script>
import Between from 'between.js';
// new Between(from, to).time(duration)
new Between(1, 10).time(1000)
.on('update', (value) => { // This callback is executed in every frame
console.log(value);
});
<script src="./path/to/between.js"></script>
<script>
new Between(1, 10).time(1000)
.on('update', (value) => {
console.log(value);
});
</script>
// Constructor
new Between(
[Number|Object|Array] from,
[Number|Object|Array] to
)
// Methods
.time([Number] duration) // Set duration
.loop([String] mode, [?Number] repeatTimes) // Set loop mode, if "repeatTimes" is falsy, treats as "endless"
.easing([Function] easing) // Set easing function
.on([String] eventName, [Function] callback) // Add event listener
.pause() // Pauses
.play() // Resumes
// Getters
.isPaused // returns true if paused
There is no need to "start" the tween. It is executed immediately once it was created.
import Between from 'between.js';
new Between(1, 10).time(1000)
.on('update', (value) => {
console.log(value);
})
.on('start', (value) => {
console.log(value);
})
.on('pause', (value) => {
console.log(value);
})
.on('play', (value) => {
console.log(value);
})
.on('complete', (value) => {
console.log(value);
});
Numbers
import Between from 'between.js';
new Between(1, 10).time(1000)
.on('update', (value) => {
console.log(value);
});
Arrays
import Between from 'between.js';
new Between([1, 5], [10, 10]).time(1000)
.on('update', (value) => {
console.log(value);
});
Objects
import Between from 'between.js';
new Between({x: 2, y: 3, z: 4}, {x: 4, y: 6, z: 10}).time(1000)
.on('update', (value) => {
console.log(value);
});
Repeat N
times
import Between from 'between.js';
new Between(1, 10).time(4000)
.loop('repeat', N)
.on('update', (value, {times}) => {
console.log(value);
console.log(times);
});
Repeat endless
import Between from 'between.js';
new Between(1, 10).time(4000)
.loop('repeat')
.on('update', (value) => {
console.log(value);
});
Bounce N
times
import Between from 'between.js';
new Between(1, 10).time(4000)
.loop('bounce', N)
.on('update', (value, {times}) => {
console.log(value);
console.log(times);
});
import Between from 'between.js';
import Easing from 'easing-functions';
// choose easing mode frome easing-functions
new Between(1, 10).time(4000)
.easing(Between.Easing.Cubic.InOut)
.on('update', (value) => {
console.log(value);
});
Color types:
import Between from 'between.js';
import ColorPlugin from 'between.js/build/dom-color.between.js';
Between._plugins.color = ColorPlugin;
new Between('red', 'rgb(255,40,30)').time(4000)
.on('update', (value) => {
console.log(value);
});
Or in HTML:
<script src="./path/to/between.js"></script>
<script src="./path/to/dom-color.between.js"></script>
import Between from 'between.js';
import Easing from 'easing-functions';
import ColorPlugin from 'between.js/build/dom-color.between.js';
Between._plugins.color = ColorPlugin;
// choose easing mode frome easing-functions
new Between('red', 'rgb(255,40,30)').time(4000)
.loop('repeat', 3)
.easing(Between.Easing.Linear)
.on('update', (value) => {
console.log(value);
});
import Between from 'between.js';
import Easing from 'easing-functions';
// choose easing mode frome easing-functions
new Between(1, 10).time(4000)
.loop('bounce', 3)
.easing(Between.Easing.Cubic.InOut)
.on('update', (value) => {
console.log(value);
});
import Between from 'between.js';
import Easing from 'easing-functions';
// choose easing mode frome easing-functions
new Between(1, 10).time(4000)
.loop('repeat', 4)
.easing(Between.Easing.Elastic.In)
.on('update', (value) => {
console.log(value);
})
.on('complete', (value) => {
console.log(value);
});