JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div class="wrapper">
  <div class="box red b-circul1"></div>
</div>

CSS

.wrapper{
  position:absolute;
  top:200px;
  
}
.box{
    position:absolute;
    width:50px;
    height:50px;
  visibility:hidden;
}

.red{
    background-color:red;
}

JavaScript

TweenLite.set($(".b-circul1"), {css:{borderRadius:"50%", visibility:"visible"}});

var maxx = new TimelineMax({repeat:6,delay:.2});
maxx.timeScale(.5);

//both these tweens start at the same time
maxx.to($('.b-circul1'), 1, {css:{x:500},ease:Linear.easeNone});
maxx.insert(TweenMax.to($('.b-circul1'), .5, {css:{y:50,scale:.25}, ease:Circ.easeOut, repeat:1, yoyo:true}));
//then both these tweens start

maxx.to($('.b-circul1'), 1, {css:{x:0},ease:Linear.easeNone});
maxx.insert(TweenMax.to($('.b-circul1'), .5, {css:{y:-50, scale:2}, ease:Circ.easeOut, repeat:1, yoyo:true}), 1);