JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<p>rollover the green box</p>
<div class="box"></div>

CSS

.box{
  position:relative;
  width:50px;
  height:50px;
  margin-top:1px;
  background-color:limegreen;
}

JavaScript

var box = $(".box");

tl = new TimelineLite({});
//reset box opacity to 1 at the beginning
tl.set(box, {css:{opacity:1}});
tl.to(box, 8, {css:{left:400}});

box.mouseenter(function() {
  //optional
  //tl.pause();
  TweenLite.to(box, 0.5, {css:{opacity:0}, onComplete:restart})
})

function restart(){
  tl.restart();
}