weee.js: JavaScript Tween Library
Installation
Browser
<script src="path/to/weee.pkgd.js"></script>
weee.pkgd.js is packaged file with dependencies (EventEmitter2).
If you already have EventEmitter2 in your project, use weee.js.
Node
npm install weee
Examples
Simple tween for DOM element
var target = document.getElementById('target');
weee({
from: 0,
to: 500,
duration: 2000,
ease: weee.cubicInOut,
target: target,
setter: weee.Tween.css({name: 'left', unit: 'px'})
})
.play();
Repeating tween
var target = document.getElementById('target');
weee({
from: 0,
to: 500,
duration: 2000,
ease: weee.cubicInOut,
repeatType: 'reverse',
repeatCount: Infinity,
target: target,
setter: weee.Tween.css({name: 'left', unit: 'px'})
})
.play();
Set multiple properties with single tween
var target = document.getElementById('target');
weee({
from: 0,
to: 1,
duration: 2000,
ease: weee.cubicInOut,
target: target,
setter: function(value) {
this.style.left = String(value * 500) + 'px';
this.style.top = String(value * 300) + 'px';
}
})
.play();
Using events
var target = document.getElementById('target');
weee({
from: 0,
to: 500,
duration: 2000,
ease: weee.cubicInOut
})
.on('start', function(tween) {
console.log('start', tween.value());
})
.on('update', function(tween) {
console.log('update', tween.value());
target.style.left = String(tween.value()) + 'px';
})
.on('end', function(tween) {
console.log('end', tween.value());
})
.play();
Method chaining
weee()
.from(0)
.to(500)
.duration(2000)
.ease(weee.cubicInOut)
.target(target)
.setter(weee.Tween.css({name: 'left', unit: 'px'}))
.play();
Extra: window scrolling
var t = weee.ScrollY({
duration: 500,
ease: weee.cubicOut,
target: window
});
t.to(1000);
Dependencies