JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<div id="box">
    <div id="box-inner"></div>
</div>
<div id="box2">
</div>


<br><br>
<button id="go">Go</button>
<button id="reverse">Reverse</button>

CSS

#box, #box2 {
    width: 100px; height: 100px;
}

#box-inner {
    width: 100%; height: 100%;
    background: red;
}

JavaScript

var t = new TimelineMax({
    paused: true
});

t.add(TweenLite.to('#box #box-inner', 2, { backgroundColor: 'green' }), 0)

t.add(function(){
    var boxinner = $('#box-inner').remove();// setting the bg to green again isn't needed as the complete state of boxinner will be maintained
    $('#box2').append(boxinner); // evem moving it to a new location doesn't "break" the link to the DOM element
}, 2)

$('#go').click(function(){
    t.play();
});


$('#reverse').click(function(){
    t.reverse();
});