JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<div class="box" id="box1"></div>

CSS

.box{
    position:relative;
    width:50px;
    height:50px;
    background-color:#f60;
    margin:6px;
}

JavaScript

//add a Bounce ease at the end
TweenLite.to($('#box1'), 3, {css:{left:400}, ease:Bounce.easeOut, delay:.5});

//Try some of these eases

/*
Back.easeOut
Back.easeIn
Elastic.easeOut
Elastic.easeInOut

// experiment with these eases of increasing strength

Power1.easeOut
Power2.easeOut
Power3.easeOut
Power4.easeOut

*/