JSFiddle - React, Tailwind, and code Playground

by annam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<div id="box-1" class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: grey;
  position: absolute;
}

JavaScript

document.getElementById('box-1').addEventListener('click',function(){

	let tl = new TimelineMax({
	  force3D: true, 
    immediateRender: false,
  	paused: true
  });
  
  tl.add(function () {
	  console.log('start')  
  }, 0.001);
  
	tl.add(TweenLite.to('#box-1', 3, { x: 500 }))

	tl.eventCallback("onComplete", function () {
	  console.log('complete')
  });

	tl.play(0)

})