JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<div id="container">
    <header>
        <h1><span>Ceaser</span> CSS Easing Animation Tool</h1>
        <section class="description">
            <ol>
                <li>Choose an easing type and test it out with a few effects.</li>
                <li>If you don’t quite like the easing, grab a handle and fix it.</li>
                <li>When you’re happy, snag your code and off you go.</li>
            </ol>
            <p>Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out...yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now.
                <nobr>Also, touch-device</nobr>friendly!</p>
            <p> <strong>Note:</strong> Bugfixes have landed, so the newest Webkit now supports values above 1 and below 0. For the time being, I am including fallback code for older Webkit that is clamped between 0 and 1 when needed.</p>
        </section>
    </header>
    <section class="demo">
        <div class="controls clearfix">
            <div class="graph">
                <figure>
                    <canvas height="450" width="200" id="curve"></canvas>
                    <figcaption id="axisTime">Time</figcaption>
                    <figcaption id="axisAnimation">Animation (%)</figcaption>
                </figure>
            </div>
            <div class="options">
                <label for="presets"><span class="text">Easing:</span>

                    <select id="presets" name="presets">
                        <optgroup label="defaults">
                            <option selected="" value="0.250, 0.250, 0.750, 0.750">linear</option>
                            <option value="0.250, 0.100, 0.250, 1.000">ease (default)</option>
                            <option value="0.420, 0.000,...

CSS

/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */

/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:"";
    content: none;
}
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}
/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */
 body {
    font:13px/1.231 sans-serif;
    *font-size:small;
}
/*...

JavaScript

/*
************************* 
CSS Easing Animation Tool
************************* 
*/



// stupid FF FOUT fix
$('h1 span').css('display', 'inline-block');

var canvas = document.getElementById('curve'),
    ctx = canvas.getContext('2d'),
    box = document.getElementById('box'),
    code = document.getElementById('codeOutput'),
    supportsTouch = ('createTouch' in document),
    time = document.getElementById('time'),
    timeVal = 500;


var supportsBezierRange = (function () {
    var el = document.createElement('div');
    el.style.WebkitTransitionTimingFunction = 'cubic-bezier(1,0,0,1.1)';
    return !!el.style.WebkitTransitionTimingFunction.length;
})();

// bezier contructor
function BezierHandle(x, y) {
    this.x = x;
    this.y = y;
    this.width = 12;
    this.height = 12;
}

BezierHandle.prototype = {

    // get the edges for easy grabby coordinates
    getSides: function () {
        this.left = this.x - (this.width / 2);
        this.right = this.left + this.width;
        this.top = this.y - (this.height / 2);
        this.bottom = this.top + this.height;
    },

    draw: function () {
        // figure out the edges
        this.getSides();
        ctx.fillStyle = "#222";
        ctx.fillRect(this.left, this.top, this.width, this.height);
    }

};


// make 2 new handles
var handles = [
new BezierHandle(50, 280),
new BezierHandle(150, 180)];

function Graph() {
    this.x = 0;
    this.y = 130;
    this.height = 200;
    this.width = 200;
}

Graph.prototype = {

    draw: function () {

        ctx.save();

        ctx.fillStyle = "#fff";
        ctx.fillRect(this.x, this.y, this.width, this.height);

        // the 0.5 offset is to account for stroke width to make lines sharp
        ctx.strokeStyle = '#666';
        ctx.lineWidth = 1;
        ctx.strokeRect(this.x + 0.5, this.y - 0.5, this.width - 1, this.height);

        ctx.restore();
    }

};

var graph = new Graph();

// get the x and y pos, normalized by getOffset
function...