JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div id="firstDiv">
<img src="https://greensock.com/wp-content/uploads/2014/04/robust.png" id="bar"/>
</div>
<div id="secondDiv">
<img src="https://greensock.com/wp-content/uploads/2014/04/compatible.png" id="html"/>
  <p id="myText"> this is any text here</p>
</div>

CSS

div{
  width: 50%;
  float: left;
}
img{
  width: 400px;
}

JavaScript

// APPROACH 1 -- Comment / Uncomment the code block below
/*
var line = new TimelineMax();
line.to('#bar', 1, { x: '+=300', y: '+=100' });
line.to('#html', 1, { x: '-=300', y: '+=100' });
line.to('#bar', 1, { x: '-=300', y: '-=100' });
line.to('#html', 1, { x: '+=300', y: '-=100' });
//*/

// APPROACH 2 -- Comment / Uncomment the code block below
///*
var line = new TimelineMax();
line.to('#bar', 1, { x: 300, y: 100 });
line.to('#html', 1, { x: -300, y: 100 });
line.to('#bar', 1, { x: 0, y: 0 });
line.to('#html', 1, { x: 0, y: 0 });
//*/