JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<script src="https://raw.github.com/danheberden/easing.js/master/dist/easing.js.js"></script>
<!-- 
    
            
                      _ \  _` |  __| | __ \   _` |
                      __/ (   |\__ \ | |   | (   |
                    \___|\__,_|____/_|_|  _|\__, |
                         by danheberden     |___/ 
         
                        http://github.com/danheberden/easing.js


-->

CSS

body {
    min-width:750px;
}
h1 {
    margin-bottom:4px;
    font-size:1.2em;
    font-family: Helvetica, Arial;
    text-align:center;
}
div.container {
    text-align:center;
    border:1px solid #BBB;
    padding:10px;
    float:left;
    margin:10px;
    width:202px;
    height:222px;
    background:#DDD;
}

div.container:nth-child(3n + 1){
  clear:left;   
}

.animate {
    width:200px;
    height:222px;
    background:#999;
    border:1px solid #444;
    border-radius: 5px;
}

.graph {
    width:200px;
    height:201px;
    margin:5px
    display:inline-block;
    text-align: left;
    position:relative;
    background:#FFF;
}
.graph  > div {
    position:absolute;
    bottom:0;
    width:3px;
    height:2px;
    padding:0;margin:0;
    background:#000;
    display:inline-block;
}

JavaScript

function makeGraph( name ) {

  var graph = $( '<div class="animate"></div>' )
    .append('<h1>'+name+'</h1>')
    .append( $('<div class="graph">').html( render( name ) ) )
    .on( 'click', function(e){
        var $anim = $(this);
        $anim.slideUp( 1500, name, function(){
            setTimeout( function(){
                $anim.slideDown(1);
            },1000);
        });
     });
  $( '<div class="container"></div>' )
      .append( graph )
      .appendTo( document.body ); 
}


function render( type ){
    var output = [],
        i = 0,
        result;
    for ( ; i < 100; i++ ) {
       result = easing( type, i/100 );
       output.push( '<div style="left:'+(i*2)+'px; bottom:' + (result*200) + 'px;"' +
                     'title="' + i + '%: ' + result + '">&nbsp;</div>'); 
    }
    return output.reverse().join('');

}

// render each easing function
$.each( easing.mappings, function( n, v ){
   
  $.each( ['In', 'Out', 'InOut'], function( i, t ) {
     makeGraph( "ease" + t + n );
    
  });
});