JSFiddle - React, Tailwind, and code Playground

by bestmomo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<svg height="100" width="300">
   <circle cx="-40" cy="40" r="30" fill="red"/>
   <circle cx="-40" cy="40" r="30" fill="red"/>
   <circle cx="-40" cy="40" r="30" fill="red"/>
   <circle cx="-40" cy="40" r="30" fill="red"/>
</svg> 
<br>
<button id="pause" onclick="pauser()">Pause</button>
<button id="inverser" onclick="inverser()">Inverser</button>
<button id="relancer" onclick="relancer()">Relancer</button>
<button id="reprendre" onclick="reprendre()">Reprendre</button>

JavaScript

var tl = new TimelineMax({ paused: true })
tl.staggerTo( 
	'circle', 
  2, 
  { 
  	x: 400, 
    repeat: -1, 
    repeatDelay: 0.5, 
    ease: Power2.easeInOut
  }, 
  0.3
)
function pauser() {	tl.pause() }
function inverser() {	tl.reverse() }
function relancer() {	tl.restart() }
function reprendre() { tl.resume() }