JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/tweenjs/tween.js/master/src/Tween.js"></script>
<script src="https://rawgit.com/tweenjs/tween.js/master/examples/js/RequestAnimationFrame.js"></script>
<script>
init();
animate();
function init() {

//setup cameras
//x,y are camera positions, _x, _y are the target position
  var cameras = [];
  var tweens = [];

  cameras.push({x: 10, y: 10, _x: 0, _y: 0});
  cameras.push({x: 20, y: 20, _x: 5, _y: 5});
  cameras.push({x: 30, y: 30, _x: 10, _y: 10});
  cameras.push({x: 40, y: 40, _x: 15, _y: 15});

  // Clone the initial camera object,
  // because position's properties will change.
  var position = {};
  for (var property in cameras[0]) {
    position[property] = cameras[0][property];
  }

  for(var i = 0; i < cameras.length; i++){

    // Pick the next camera, in a loop.
    var targetCameraIndex = (i + 1) % cameras.length;
    var target = cameras[targetCameraIndex];

    tweens[i] = new TWEEN.Tween(position)
      .to(target, 500)
      .onUpdate(function(){
        console.log('TWEENING: ' + this.x + ',' + this.y + ',' + this._x + ',' + this._y);
        })
      .onStart(function(){
      	console.log('STARTING: ' + this.x + ',' + this.y + ',' + this._x + ',' + this._y);
      })
      .onComplete(function(){
      	console.log('COMPLETED: ' + this.x + ',' + this.y + ',' + this._x + ',' + this._y);
      });
  }
  
  // Now chain all the tweens in a loop.
  for (var i = 0; i < cameras.length; i++) {
    var nextTweenIndex = (i + 1) % cameras.length;
    nextTween = tweens[nextTweenIndex];
    tweens[i].chain(nextTween);
  }
  
  // Start the first tween, from camera 0 to camera 1.
  // The others will start in order, then repeat.
  tweens[0].start();
}

function animate(time) {

		requestAnimationFrame( animate );
		TWEEN.update(time);

}
</script>