JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
    <div id="container-holder">
        <div id="container">
            <div id="image1">
                <div id="imagetest1"></div>
            </div>
        </div>
    </div>
</div>

CSS

#background {
    width: 200px;
    height: 1000px;
    border: 1px solid #999;
}
#container-holder {
    width: 200px;
    height: 200px;
    border: 1px solid #999;
    visibility: visible;
    margin-top: 100px;
}
#container {
    width: 160px;
    height: 160px;
    background-color: #333f;
    border: 1px solid #333f;
}
#imagetest1 {
    width: 162px;
    height: 390px;
    background-image: url('http://i811.photobucket.com/albums/zz40/mjl-admin/rainbow.jpg');
    border: 1px solid green;
}
#image-container {
    width: 10px;
    height: 10px;
}
#image1 {
    width: 165px;
    height: 78px;
    background-color: #fff;
    overflow: hidden;
}

JavaScript

$(window).one('scroll',function () {
    if ($(window).scrollTop() > 0) {
        loadDiv();
    }
});

function loadDiv() {
    $('#container-holder').fadeIn('slow', function () {
        $(this).fadeTo("slow", 1);
        $('#container, #imagetest1').fadeTo("slow", 1);
        $('#imagetest1').delay(30).animate({
            'margin-top': '0'
        }, {
            duration: 0,
            queue: true
        })
            .delay(30).animate({
            'margin-top': '-78px'
        }, {
            duration: 0,
            queue: true
        })
            .delay(30).animate({
            'margin-top': '-156px'
        }, {
            duration: 0,
            queue: true
        })
            .delay(30).animate({
            'margin-top': '-234px'
        }, {
            duration: 0,
            queue: true
        })
            .delay(30).animate({
            'margin-top': '-312px'
        }, {
            duration: 0,
            queue: true
        });
    });
}