JSFiddle - React, Tailwind, and code Playground

by sgearhart2

HTML

<script src="https://rawgit.com/jeremyckahn/shifty/master/dist/shifty.min.js"></script>
<div id="redBox">
</div>

<div id="waterLine"></div>

CSS

#redBox {
    width:25px;
    height:25px;
    background-color:red;
    position:absolute;
    border: solid purple;
}
#waterLine {
    width: 100%;
    border-top: solid black 3px;
    margin-top:297px;
    height: 500px;
    background-color: lightBlue;
}

JavaScript

var redBox = document.getElementById('redBox');
var redBoxTween = new Tweenable();
var a = 0, borderWidth = 0;

redBoxTween.tween({
    from:{
        x:0,
        y:0       
    },
    to:{
        x:400,
        y:300
    },
    easing:{
        x:'linear',
        y:'bouncePast'        
    },
    duration:3000,
    step:function(state){
        a = ((a + 15) % 360);
        redBox.style.left = state.x + 'px';
        redBox.style.top = state.y + 'px';
        redBox.style.transform = 'rotate(' + a + 'deg)';
        redBox.style.webkitTransform = 'rotate(' + a + 'deg)';
        redBox.style.mozTransform = 'rotate(' + a + 'deg)';
        if(state.y > 300)
            redBox.style.borderWidth = borderWidth++ + 'px';
    }
});