JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#demo {
    position:absolute;
    top: -850px;
    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, 950px, 0);
    transform: translate3d(0, 950px, 0);
}
#element.active {
    -webkit-transform: translate3d(0, -1100px, 0);
    transform: translate3d(0, -1100px, 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);


element = $('#element'); // Cache these selectors for future use.
demo = $('#demo');

function checkCollision() {
    var top = element.offset().top;
    var bigBoxTop = demo.offset().top + demo.height();
    console.log(bigBoxTop, top);
    if (bigBoxTop >= top) {
        element.css('background', 'black');
        clearInterval(interval);
    }
}