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() {
	TweenMax.to('#cercle1', 2, { x: 100 })
  TweenMax.to('#cercle2', 2, { x: 100 , delay: .2 })
  TweenMax.to('#cercle3', 2, { x: 100 , delay: .4 })
}