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>
<button id="flip" href="#">Start</button>
<div id="block-1" class="block"> blok 1 </div> 
<div id="block-2" class="block"> blok 2 </div> 
<div id="block-3" class="block"> blok 3 </div> 
<div id="block-4" class="block"> blok 4 </div> 
<div id="block-5" class="block"> blok 5 </div> 
<div id="block-6" class="block"> blok 6 </div>
<h1 id="text-1">This is text-1</h1>

JavaScript

var heading = document.getElementsByTagName('h1')[0];
var blocks = document.getElementsByClassName('block');
var numBlocks = blocks.length;
var flipButton = document.getElementById('flip');
var tl = new TimelineMax({ paused: true, reversed: true });
var stagger = 0.06;
var textAnimDuration = 1.2;
var animDuration = 0.6;
var animOverlap = 0.1;
//
function init() {
    setInitialStyles();
    doIntro();
    createTimeline();
}

function setInitialStyles() {
    TweenMax.set(heading, { position: 'absolute', top: 100 });
    TweenMax.set(blocks, {
        position: 'absolute',
        top: 50,
        height: 50,
        width: 50,
        background: '#cc0'
    });
}

function doIntro() {
    TweenMax.staggerTo(blocks, animDuration, {
        cycle: {
            x: function(index) { return index * 60; }
        },
        ease: Back.easeOut,
        onComplete: function() {
            flipButton.addEventListener('click', onClicked, false);
        },
        callbackScope: this
    }, stagger);
}

function createTimeline() {
    tl.staggerTo(blocks, animDuration, {
        rotation: 30,
        ease: Back.easeInOut
    }, stagger);
    tl.to(heading, textAnimDuration, {
        y: 200,
        ease: Expo.easeInOut
    }, '-=' + animOverlap);
    tl.staggerTo(blocks, animDuration, {
        x: 100,
        ease: Expo.easeInOut
    }, stagger, '-=' + (textAnimDuration + animOverlap));
    tl.staggerTo(blocks, animDuration, {
        y: 400,
        ease: Expo.easeInOut
    }, stagger, '-=' + animOverlap);
}

function onClicked() {
    tl.reversed() ? tl.play() : tl.reverse();
}
//
init();