Tween-Play-Pause

This is a derivative of the Tween.JS library by Sole on Github.com. For more documentation head over to their repository.

JavaScript tweening engine for easy animations, incorporating optimised Robert Penner's equations.

// Start position coordinates
var coords = { x: 0, y: 0 };

//Time tween will animate from start point to end point in milliseconds 
var duration = 1000; 

// End coordinates 
// End Position coords can also be an array of positions 
// var endX = [0, 100, 200, 300]; var endY = [0, 100, 200, 300];
// Ex:  .to({ x: endX, y: endY }, duration) ...

var endCoords = { x: 100, y: 100 };

var tween = new TWEEN.Tween(coords)
    .to(endCoords, duration)
    .onUpdate(function() {
        //Show position of Tween
        console.log(this.x, this.y);
        //Animate the coords using x and y passed through
        coords.x = this.x;
        coords.y = this.y;
    })
    .start();

requestAnimationFrame(animate);

function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}

//Play Tween
tween.play();

//Pause Tween
tween.pause();

Installation

Download the library and include it in your code:

<script src="js/Tween.js"></script>

More advanced users might want to...

Use npm

npm install tween-play-pause