TINA - relative tween example

HTML

<script src="https://rawgit.com/Wizcorp/tina/master/build/tina.min.js"></script>
<script src="https://rawgit.com/Wizcorp/tina.js/master/examples/Sprite.js"></script>
<image id="image" src="http://www.lorempixel.com/200/200" class="hidden">
<canvas id="canvas" width="1000" height="200"></canvas>

<div>
  <image id="image2" src="http://www.lorempixel.com/200/201">
</div>

CSS

body {
	background-color: #7F7F7F;
	text-align: center;
	font-family: verdana;
}

canvas {
	display: block;
}

.title {
	font-weight: bolder;
	font-size: 30px;
	color: #AAA;
}

.hidden {
	display: none;
}

@keyframes anim {
  0% {
    transform: translateX(-300px)
  }
  50% {
    transform: translateX(600px)
  }
  100% {
    transform: translateX(-300px)
  }
}

#image2 {
  animation: anim 2s ease-in-out infinite;
}

JavaScript

var image   = document.getElementById('image');
var canvas  = document.getElementById('canvas');
var ctx     = canvas.getContext('2d');
var sprite  = new Sprite(image, { y: 100 });

//▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄

TINA.onUpdate(function update(t, dt) {
	// At this point, all my tweens are up to date for the current iteration
	ctx.clearRect(0, 0, 1000, 200);
	sprite.draw(ctx);
});

//▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄

new TINA.Tween(sprite, ['x', 'rotation'])
	.relative(true)
	.iterations(Infinity)
	.pingpong(true)
	.from({ x: 100, rotation: 0 })
	.to({   x: 900, rotation:  0 }, 1000, TINA.easing.sineInOut)
	.start();

/* new TINA.Tween(sprite, ['x', 'rotation'])
  .relative(true)
  .iterations(Infinity)
  .pingpong(true)
  .from({ x: -30, rotation: 0 })
  .to({   x:  30, rotation:  0 }, 260, TINA.easing.sineInOut)
  .start();
*/