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>

JavaScript

var numDIVs = 100, divs = [], div = null, width = 1, height = 40, margin = 10, gutter = 2;
for (var i = 0; i < numDIVs; i += 1) {
    div = document.createElement('div');
    document.body.appendChild(div);
    divs.push(div);
}

TweenMax.staggerTo(divs, 0, {
    position: 'absolute',
    top: margin,
    cycle: {
        left: function(index) { return margin + index * width * gutter; }
    },
    width: width,
    height: height,
    backgroundColor: '#cc0'
}, 0);

TweenMax.staggerTo(divs, 4, {
    cycle: {
        delay: function(index) { // this block doesn't seem to be working
            return index; // or perhaps I am missing something simple
        },
        rotation: function(index) {
            return index * 90;
        },
        scale: function(index) {
            return index * 0.04;
        },
        y: function(index) {
            return index * width;
        },
        ease: function(index) {
            return Back.easeOut.config(index * 0.02);
        }
    }
}, 0);