JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="container">
    <img class="photo" src="http://orig03.deviantart.net/6334/f/2013/006/9/6/landscape___france_by_louis_photos-d5qoxxm.jpg" alt="">
    <img class="photo" src="http://www.papekphotography.com/blog/wp-content/uploads/2012/06/Scottpapek2.jpg" alt="">
    <img class="photo" src="http://www.journeyoflight.com/journey12/photographs/color/midwest/large/img_8634_chimneyrock_2009b_tonalcontrast.jpg?t=12345?" alt="">
</div>

CSS

.photo{
    position: absolute;
}

JavaScript

var photos = document.getElementsByClassName('photo');
var length = photos.length;
var tl = new TimelineMax({ paused: true, repeat: -1, yoyo: true });
var duration = 2.0;
var easeInOut = Expo.easeInOut;

TweenMax.staggerTo(photos, 0, { cycle: { autoAlpha: function(index) {
    return index !== 0 ? 0 : 1;
}}}, 0);

for (var i = 0; i < length; i += 1) {
    if (i > 0) {
        tl.to(photos[i], duration, { autoAlpha: 1, ease: easeInOut }, '-=' + duration);
    }
    if (i < length - 1) {
        tl.to(photos[i], duration, { autoAlpha: 0, ease: easeInOut });
    }
}

tl.play();