JSFiddle - React, Tailwind, and code Playground

by kouty79

HTML

<button id="b1">Animate Style</button><button id="b2">Animate translate3d</button>
<div id="viewport1" class="viewport">
</div>
<div id="viewport2" class="viewport">
</div>

CSS

.viewport {
  width: 600px;
  height: 300px;
  position: relative;
  border: 1px solid black;
  overflow: hidden;
}

.viewport img {
  position: absolute;
  width: 1240px;
  height: 900px;
}

JavaScript

var animate1 = false;
var animate2 = false;
document.getElementById('b1').onclick = function() {
	animate1 = !animate1;
};
document.getElementById('b2').onclick = function() {
	animate2 = !animate2;
};

var vp1 = document.getElementById('viewport1');
var vp2 = document.getElementById('viewport2');

var img = new Image();
img.src = 'http://i.imgur.com/FlW0Lbf.jpg';
var img2 = new Image();
img2.src = 'http://i.imgur.com/FlW0Lbf.jpg';

img.onload = function() {
  vp1.appendChild(img);
  vp2.appendChild(img2);

	requestAnimationFrame(animate);		

};

function f(t) {
	return Math.sin(t / 1000) * 100 - 500;
}

function animate(time) {
	requestAnimationFrame(animate);
  var x = f(time);
  var y = x * 0.5;
  
  if(animate1) {
  	img.style.left = x + 'px';
  	img.style.top = y + 'px';
  }
  
  if(animate2) {
  	var t = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
  	img2.style.transform = t;
  }
}