JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div class="block" data-ratio="0.7"></div>
<div class="block" data-ratio="0.7"></div>
<div class="block" data-ratio="0.1"></div>

<a href="#start">Start</a> | <a href="#stop">Stop</a>

CSS

.block { 
    height: 30px; 
    width: 30px; 
    top: 50px;
    left: 200px;
    background: #990000;
    position: absolute;
}

JavaScript

var i = 0, prevX, prevY;

var Something = new Class({
    Implements: [Options],
    options : {
        interval: 50,
        container: $$('body')[0],
        transition: {
            duration: 1000,
            transition: Fx.Transitions.Quad.easeInOut
        }
    },
    
    initialize: function(){
        var elements = this.parseArguments(arguments);

        this.elements = elements;
        this.setup();
    },
    
    parseArguments: 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);
            }
        }
        
        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;
    },
    
    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',{
                left: element.getPosition().x,
                top: element.getPosition().y,
                width: element.getSize().x,
                height: element.getSize().y
            });
            element.set('morph', self.options.transition);
        });
        
    },
        
    morph: function(obj){
        var seconds = this.options.interval * this.elements.length,
            self =...