JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
    width: 0px;
    height: 10px;
    background: red;
    margin: 0 0 10px 0;
}

JavaScript

// Closure
(function ( window, undefined ) {
    
    // Define animate
    var animate = function () {
        
        // Set empty array if no elements provided
        var elements = arguments[ 0 ] || [];
        
        // Set empty object if no properties provided
        var properties = ( typeof arguments[ 1 ] !== 'object' ) ? {} : arguments[ 1 ];
        
        // Set default duration of half a second if no duration is provided
        var duration = ( typeof arguments[ 2 ] !== 'number' ) ? 500 : arguments[ 2 ];
        
        // Set no-op if no callback function is provided
        var callback = ( typeof arguments[ 3 ] !== 'function' ) ? function () {} : arguments[ 3 ];
        
        // Calculate fps (ie. 60 frames a second)
        var fps = 1000 / 60;
        
        // Calculate total # of steps
        var steps = Math.floor( duration / fps );    
        
        // Normalize elements from potentially a Node List to an Array
        elements = Array.prototype.slice.call( elements );                
        
        // Create a step function we'll loop
        var step = function ( counter ) {
            
            // Loop through elements
            elements.forEach( function ( element ) {
                
                // Loop through properties
                for ( var key in properties ) {
                    
                    // Get target value
                    var target = properties[ key ];
                    
                    // Get current value of element's property
                    var current = null;
                    if ( element.style && element.style[ key ] ) {
                        current = parseInt( element.style[ key ] );
                    } else if ( window.getComputedStyle ) {
                        current = parseInt( window.getComputedStyle( element, null ).getPropertyValue( key ) );   
                    }
                    
                    // Ensure value is a number
             ...