JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<div class="iphone-wrapper">eyePhone
    <div class="iphone-screen">
        <div id="screen1">
            <img src="http://lorempixel.com/327/1375/animals" alt="">
        </div>
        <div id="screen2">
            <img src="http://lorempixel.com/327/1456/animals" alt="">
        </div>
        <div id="screen3">
            <img src="http://lorempixel.com/327/1900/animals" alt="">
        </div>
    </div>
</div>

CSS

body {
    background-color: white;
    color: white;
    text-align: center;
}
.iphone-wrapper {
    background-color: #000;
    display: block;
    width: 387px;
    height: 815px;
    position: relative;
}
.iphone-screen {
    width:327px;
    height:577px;
    overflow: hidden;
    background-color: white;
    position: absolute;
    top: 120px;
    left: 33px;
}
.iphone-screen div {
    opacity: 0;
    position: absolute;
}

JavaScript

function iphoneAnimate() {
    $('.iphone-screen div').repeat().css({
        opacity: 0,
        top: 0
    })
    .each($)
    .fadeTo(1000, 1)
    .then(function(){ 
        $(this).animate({top: $('.iphone-screen').height() - $(this).height()
                                                              },4000);})
    .fadeTo(1000, 0, $);
}

iphoneAnimate();