JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

<div class="test">
  <div id="margin"></div>
</div>
<div class="test">
  <div id="translate"></div>
</div>

CSS

.test {
  border: 1px solid black;
  width: 50%;
  overflow: hidden;
}

JavaScript

var margin = document.getElementById('margin')
var translate = document.getElementById('translate')
var text = '';
for(var i = 0;i < 500; i++) text += i + '_'

margin.innerText = text
translate.innerText = text




var left = 0;
var translateX = 0;

/*var a = function(){
	margin.style.marginLeft = (left) + 'px'
  translate.style.transform = 'translateX(' + (translateX) + 'px)'
  left -= 4;
  translateX -= 4;
  requestAnimationFrame(a)
}

requestAnimationFrame(a)*/

setInterval(function(){
	margin.style.marginLeft = (--left) + 'px'
}, 1)


setInterval(function(){
	translate.style.transform = 'translateX(' + (--translateX) + 'px)'
}, 1)