JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<script src="https://rawgithub.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<div class="block block3"></div>

CSS

.block{
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(http://www.nhc.noaa.gov/graphics/twitter_logo.png);
}

JavaScript

(function() {

  $.keyframe = $.extend($.keyframe, {

    pathfinderOpts: {
      bezierSteps: 100,
      circleSteps: 5
    },

    bezierPath: function(kfro, p1, p2, p3, p4){

      var opts = $.keyframe.pathfinderOpts;
      if(p4 == null){
        p4 = p1;
      }

      p1 = coord(p1[0],p1[1]);
      p2 = coord(p2[0],p2[1]);
      p3 = coord(p3[0],p3[1]);
      p4 = coord(p4[0],p4[1]);
      
      var points = {};
      var step = 1 / opts.bezierSteps;

      for (var i = 0; i <= 1.01; i += step){
        var newpos = getBezier(i, p1, p4, p3, p2);
        points[ (100 - Math.round(i * 100)) + '%' ] = { 'transform': 'translate(' + newpos.x + 'px,' + newpos.y + 'px)' };
      }

      return $.extend(kfro, points);

    },

    circlePath: function(kfro, center, radius){
      var opts = $.keyframe.pathfinderOpts;

      center = coord(center[0],center[1]);
      var points = {};
      var pieandahalf = 1.5 * Math.PI;
      var notmuchpie = Math.PI / 180;
      var step = 100 / opts.circleSteps
      
      for (var i = 0; i <= opts.circleSteps; ++i){
        var degree = 360 / opts.circleSteps * i;
        var radians = pieandahalf + degree * notmuchpie;
        var newpos = getCirclePoint(radians, radius, center);
        points[ Math.round(step * i) + '%' ] = { 'transform': 'translate(' + newpos.x + 'px,' + newpos.y + 'px)' };
      }
      return $.extend(kfro, points);
    }
  });

  function getCirclePoint(radians, radius, center) {
    return {
        x: (center.x + radius * Math.cos(radians)),
        y: (center.y + radius * Math.sin(radians))
    }
  }

  //====================================\\
  // 13thParallel.org Beziér Curve Code \\
  //   by Dan Pupius (www.pupius.net)   \\
  //====================================\\

  var coord = function (x,y) {
    if(!x) var x=0;
    if(!y) var y=0;
    return {x: x, y: y};
  }

  function B1(t) { return t*t*t }
  function B2(t) { return 3*t*t*(1-t) }
  function B3(t) { return 3*t*(1-t)*(1-t) }
  function...