JSFiddle - React, Tailwind, and code Playground

HTML

<script>
/*
Script: Mediator
    Object grouping and brokering

Copyright and License:
    Copyright 2010, Mark Obcena. MIT-Style License

*/

(function(){

this.Mediator = new Type('Mediator', function(){
    this.$collected = [];
    this.$chain = [];
    if (arguments.length){
        this.$collected.concat(Array.prototype.slice(arguments));
    }
});

var start = function(fn, args){
    var obj = this.$collected.shift();
    fn.apply(obj, args);
};

Mediator.implement({

    push: function(obj){
        this.$collected.push(obj);
        if (this.$chain.length){
            var fn = this.$chain.shift();
            start.call(this, fn.fn, fn.args);
        }
        return this;
    },

    shift: function(){
        return this.$collected.shift();
    },

    call: function(fn, args){
        if (!this.$collected.length) this.$chain.push({fn: fn, args: args});
        else start.call(this, fn, args);
        return this;
    }

});

})();
</script>

CSS

div{
    width: 0px;
    height: 20px;
    line-height: 20px;
    background: green;
    border: 1px solid;
    overflow: hidden;
}

JavaScript

for(var i = 0; i < 2000; i++){
    new Element('div', {
        'html': ''
    }).inject(document.body);
}

var med = new Mediator(),
    duration = 340,
    divs = $$('div');

for(var i = 0; i < 8; i++){
    med.push(new Fx.Morph(document.body, {
        'duration': duration * ((i || 1) * 2),
        'onComplete': $empty
    }));
}

divs.each(function(div){
    med.call(function(){
        this.subject = this.element = div;
        div.set('html', '>> '+ this.options.duration)
        
        var fn = function(){
            med.push(this);
            this.removeEvent('complete', fn);
        }.bind(this);

        this.addEvent('complete', fn);

        this.start({
            'width': arguments[1]
        });
    },[0, 200]);
});