Tween.js example

gistfile1.js

function init() {

  // Create and populate the Array of Objects
  for (var i = 0; i < numPoints; i++) {
    var point = addDOMPoint(i);
    pointsY[i] = {
      // index
      i: i,
      x: i * xSpacing,
      y: 400,
      // DOM reference, used in update();
      point: point
    }
  }
}

// Randomise now Array of Objects with changed property 
function randomise() {

  for (var i = 0; i < numPoints; i++) {
    newPointsY[i] = {
      y: Math.random() * 400
    }
  }
}

function tween() {

  // Execute separate tweens for each Object 
  for (var i = 0; i < numPoints; i++) {
    var tween = new TWEEN.Tween(pointsY[i])
      .to(newPointsY[i], 500)
      .easing(TWEEN.Easing.Cubic.EaseInOut)
      .onUpdate(update)
      .delay(i * 20)
      .start();
  }
}

// step function
function update() {

  // some DOM manipulation
  setPointCSS(pointsY[this.i].point, pointsY[this.i].x, pointsY[this.i].y);
}