JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div id="from" class="center"> <img src="the_lady_eve.jpg" alt="eve" width="500px"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<br>
<button id="pause">Play / Pause Squares</button>

CSS

.square{
  width:110px;
  height:110px;
  background-color:#A58760;
  position:relative;
  margin:10px;
  display:inline-block;
}

JavaScript

TweenMax.from("#from",5,{opacity:0,y:-200});
var timeline = new TimelineMax();
timeline.staggerFrom('.square',3,{
	y:200,
  scale:0,
  backgroundColor:'#ff0000',
  delay:2
},2);
$('#pause').click(function(){
	if (timeline.paused()) {
  	timeline.resume();
  } else {
  	timeline.pause();
  }
});