JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">

</div>

CSS

#box{
  width:100px;
  height:100px;
  background-color:#ff0000;
}

JavaScript

var obj = document.getElementById('box');

var position = { x: 0, y: 0, z: 0 };

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail,obj) });

// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    position: position
  }
});
obj.dispatchEvent(event);

function process(data,obj){

	obj.style.transform = 'translateX(' + data.position.x + 'px) translateY(' + data.position.y + 'px)';

}

function render(){

	position.x++;
	position.y++;
	
  obj.dispatchEvent(event);
  
	requestAnimationFrame(render);

}

render();