JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo"></div>
<div id="element"></div>

CSS

#demo {
    position:absolute;
    top: -650px;
    display:block;
    height:500px;
    width:500px;
    background: #ccc;
    border:1px solid #000;
    transition: transform 6s ease-in-out;
    -webkit-transition: -webkit-transform 6s ease-in-out;
    /** Chrome & Safari **/
    -moz-transition: -moz-transform 6s ease-in-out;
    /** Firefox **/
    -o-transition: -o-transform 6s ease-in-out;
    /** Opera **/
}
#demo.active{
   -webkit-transform: translate3d(0, 1000px, 0);
   transform: translate3d(0, 1000px, 0);
}
#element.active {
    -webkit-transform: translate3d(0, -1200px, 0);
   transform: translate3d(0, -1200px, 0);
}
#element {
    display:block;
    position:absolute;
    width:100px;
    height:100px;
    background:red;
    top: 1200px;
    transition: transform 4s ease-in-out;
    -webkit-transition: -webkit-transform 4s ease-in-out;
    /** Chrome & Safari **/
    -moz-transition: -moz-transform 4s ease-in-out;
    /** Firefox **/
    -o-transition: -o-transform 4s ease-in-out;
    /** Opera **/
}

JavaScript

var interval = setInterval(function () {
    checkCollision();
}, 1);

setTimeout(function () {
    $('#demo').addClass('active');
    $('#element').addClass('active');
}, 60);




function checkCollision() {
    var top = $('#element').offset().top;
    var bigBoxTop = $('#demo').offset().top + $('#demo').height();


    if (bigBoxTop >= top) {
        $('#element').css('background', 'black');
        clearInterval(interval);
    }
}