JSFiddle - React, Tailwind, and code Playground
by Atit Sasono
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<body>
<div id="demo">
<div id="logo"></div>
</div>
<input type="button" id="restartBtn" value="restart()">
CSS
body{
background-color:#000;
}
#demo {
width: 692px;
height: 60px;
background-color: #333;
padding: 8px;
}
#logo {
position: relative;
width: 60px;
height: 60px;
background: url(https://vignette2.wikia.nocookie.net/kungfupanda/images/3/39/Bao.jpg) no-repeat;
}
JavaScript
window.onload = function() {
var logo = document.getElementById("logo"),
restartBtn = document.getElementById("restartBtn"),
tween = TweenLite.to(logo, 3, {left:"632px"});
restartBtn.onclick = function() {
tween.restart();
}
}