JSFiddle - React, Tailwind, and code Playground

by rpflorence

HTML

<button id="go">Go</button>
<div id="rewrite">rewrite</div>
<div id="jquery">current</div>

CSS

div {
    background: #444;
    border: solid 1px;
    width: 100px;
    height: 50px;
    color: #f0f0f0;
    padding: 10px;
    font-size: 20px;
    margin-left: 0;
  }

JavaScript

$(function (){
  var rewrite = $('#rewrite'),
      jq = $('#jquery'),
      dur = 500

  function to (){
    rewrite.morph({
      width: [100, 300]
    }, dur)

    jq.animate({
      width: 300
    }, dur, 'linear')
  }

  function from (){
    rewrite.morph({
      width: [300, 100]
    }, dur)

    jq.animate({
      width: 100
    }, dur, 'linear')
  }

  var flag = true;
  function go (){
    if (flag) to()
    else from()
    flag = !flag
  }

  $('#go').click(go)
})

// effects.js
(function ($){

  var chain = $.chain = function (obj){

    var chain = []

    if (!obj) obj = {}

    return $.extend(obj, {
      chain: function(){
        for (var i = 0, l = arguments.length; i < l; i++)
          chain.push(arguments[i])
      },

      callChain: function(){
        return (chain.length) ? chain.shift().apply(this, arguments) : false
      },

      clearChain: function(){
        chain.length = 0
      }
    })
  }

  var Fx = $.Fx = function (options, set){
    this.initialize.apply(this, arguments)
  };

  Fx.prototype = {

    options: {
      fps: 60,
      duration: 500,
      frames: null,
      link: 'ignore'
    },

    initialize: function(options, set){
      this.subject = this.subject || this;
      this.options = $.extend({}, this.options, options)
      this.set = set
    },

    getTransition: function(){
      return function(p){
        //return -(Math.cos(Math.PI * p) - 1) / 2;
        return p
      };
    },

    step: function(now){
      var diff = (this.time !== null) ? (now - this.time) : 0, frames = diff / this.frameInterval;
      this.time = now;
      this.frame += frames;

      if (this.frame < this.frames){
        var delta = this.transition(this.frame / this.frames);
        this.last = this.compute(this.from, this.to, delta)
        this.set(this.last);
      } else {
        this.frame = this.frames;
        this.last = this.compute(this.from, this.to, 1)
        this.set(this.last);
        this.stop();
      }
   ...