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` is set to the target
            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

• EventEmitter2