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>
<button onclick="lancer()">Lancer</button>
<svg height="100" width="400">
   <circle id="cercle1" cx="40" cy="40" r="30" fill="red"/>
   <circle id="cercle2" cx="120" cy="40" r="30" fill="blue"/>
   <circle id="cercle3" cx="200" cy="40" r="30" fill="green"/>
</svg>

JavaScript

function lancer() {
  var tl = new TimelineMax({ repeat: 3, repeatDelay: 1 })
  tl.add( TweenMax.to('#cercle1', 2, { x: 100, ease: Power1.easeInOut }) )
  tl.add( TweenMax.to('#cercle2', 2, { x: 100, ease: Power1.easeInOut }), .2 )
  tl.add( TweenMax.to('#cercle3', 2, { x: 100, ease: Power1.easeInOut }), .4 )
}