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>
<button id="btn">Animate</button>
<div id="box-1" class="box"></div>
<div id="box-2" class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  border: 2px solid red;
  background: yellow;
  position: absolute;
}

#box-1 {
  transform: translate(50px, 50px);
}

JavaScript

new TimelineMax().to('#box-2', 0, { x: 50, y: 170, });

document.getElementById('btn').onclick = function(){
	new TimelineMax().to('#box-1', 50, {x: '+=500', ease: 'Quad.easeOut', force3D: true, immediateRender: false});
  new TimelineMax().to('#box-2', 50, {x: '+=500', ease: 'Quad.easeOut', force3D: true, immediateRender: false});

}