JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://static.proto.io/js/TweenMax.min.js"></script>
<div id="box"></div>
<div id="trigger">go!</div>

CSS

#box {
    position: absolute; top: 0; left: 0;
    width: 100px; height: 100px; background: #000;
}

#trigger {
    position: absolute; top: 250px; left: 0;
    width: 100px; height: 25px; background: #500;
    text-align: center;
}

JavaScript

var ts = [];

$('#trigger')
    .mouseover(function(){
        
        var t = new TimelineMax({ 
            paused: true
        });

        t.add(TweenLite.to('#box', 1, { top: 200, left: 200}), 0);
        t.add(TweenLite.to('#box', 1, { backgroundColor: '#500' }), 1);
        
        t.play()
        
        ts.push(t);
    })
    .mouseout(function() {
        var time = ts[ts.length-1].time();
        
        for(var i =0; i<ts.length; i++) {
            ts[i].pause();
        }
        
        ts[0].tweenFromTo(time, 0)
    });