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="a">aaa</div>
<div class="prev">prev</div>
<div class="next">next</div>

JavaScript

var box = document.getElementsByClassName('a')[0];
var nextButton = document.getElementsByClassName('next')[0];
var prevButton = document.getElementsByClassName('prev')[0];
var tl = new TimelineMax({ paused: true });
var totalDuration = 0;
//
nextButton.addEventListener('click', onClickedNext, false);
prevButton.addEventListener('click', onClickedPrev, false);
//
function init() {
    setInitialStyles();
    createTimeline();
    totalDuration = tl.totalDuration();
}

function setInitialStyles() {
    TweenMax.staggerTo([prevButton, nextButton], 0, {
        position: 'absolute',
        top: 150,
        cycle: {
            left: function(index) { return index * 40; }
        },
        userSelect: 'none'
    });
    TweenMax.set(box, {
        position: 'absolute',
        top: 25,
        left: 0,
        width: 100,
        height: 50,
        backgroundColor: '#cc0'
    });
}
function createTimeline() {
    tl.to(box, 0.4, {
        x: 105,
        y: -25,
        width: 150,
        height: 100,
        ease: Power0.easeNone
    });
    tl.to(box, 0.4, {
        x: 260,
        y: 0,
        width: 100,
        height: 50,
        ease: Power0.easeNone
    });
}
function onClickedNext() {
    var progress = tl.progress();
    var isProgressBelowMid = progress >= 0 && progress < 0.5;
    tl.tweenTo(isProgressBelowMid ? totalDuration * 0.5 : totalDuration, {
        ease: Power2.easeOut
    });
}
function onClickedPrev() {
    var progress = tl.progress();
    var isProgressAboveMid = progress > 0.5 && progress <= 1;
    tl.tweenTo(isProgressAboveMid ? totalDuration * 0.5 : 0, {
        ease: Power2.easeOut
    });
}
//
init();