JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

CSS

body {overflow: hidden; padding: 0px;}
.block{height: 30px; width: 30px; top: 50px; left:50px; position: absolute; background: #cc0000;}

JavaScript

var Arguments = new Class({
    getArgs: function(args){

        var els = Array.prototype.slice.call( args , 0 ),
            last = typeOf(els[els.length - 1]),
            elements = [],
            options;
        
        // if the last argument isn't an element, 
        // and is an object, 
        // we'll assume it's an options object.
        if(last !== 'element' && last == 'object'){
            options = els.pop();

            if(this.setOptions) {
                this.setOptions(options);
            }
            
            if(!els.length){
                return false;
            }
        }
        
        els.each(function(el){
            if(typeOf(el) == 'elements' || 'array'){
                el.each(function(o){
                    elements.push(o);
                });
            } else if (typeOf(el) == 'element'){
                elements.push(el);                
            }
        });
        return elements.length ? elements : false;
    }
});


var Quadrify = new Class({
    Implements: [Options, Arguments],
    options: {
        interval: 50,
        container: $$('body')[0],
        transition: {
            duration: 1000,
            transition: Fx.Transitions.Quad.easeInOut
        }
    },
    
    initialize: function(){
        // set the elements and options.
        this.elements = this.getArgs(arguments);
        
    },
    
    setup: function(){
        var self = this;
        this.elements.each(function(element){
            var position = element.getPosition(self.options.container);
            var dimensions
            element.store('ratio',element.get('data-ratio') - 0);
            element.store('ogState',element.getStyles());
            element.set('morph', self.options.transition);
        });
        
    },

});


Quadrify.Grid = new Class({
    Implements: [Options, Arguments],
    
    options: {
        type: 'quadratic',
        frames: 10
    },
    
    initialize: function(){
       ...