JSFiddle - React, Tailwind, and code Playground

by skydivematy

HTML

<body>
    <button onclick="driveTo(270);">270</button>
    <button onclick="driveTo(180);">180</button>
    <button onclick="driveTo(90);">90</button>
    <button onclick="driveTo(0);">0</button>
    <div class="wrapper">
        <div class="road"></div>
        <div class="car"></div>
    </div>
    <input id="pre_value" type="hidden" value="0">
</body>

CSS

.wrapper{
    position: relative;
    width: 400px;
    height: 400px;
}
.road{
    position: absolute;
    top: 0;
    left: 0;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 10px solid grey;
}
.car{
    background: #98bf21;
    position: absolute;
    left: 170px;
    height: 50px;
    width: 50px;
    border-radius: 50px;
}

JavaScript

$(document).ready(function(){
    driveTo(0);
  });

  function driveTo(new_value){
      pre_value = document.getElementById("pre_value").value;
      var arc_params = {
          center: [180,180],
          radius: 180,
          start: pre_value,
          end: new_value,
          dir: -1
       }
    $(".car").animate({path : new $.path.arc(arc_params)})
    document.getElementById("pre_value").value = new_value;
  }



  /*
   * jQuery css bezier animation support -- Jonah Fox
   * version 0.0.1
   * Released under the MIT license.
   */

  ;(function($){

    $.path = {};

    var V = {
      rotate: function(p, degrees) {
        var radians = degrees * Math.PI / 180,
          c = Math.cos(radians),
          s = Math.sin(radians);
        return [c*p[0] - s*p[1], s*p[0] + c*p[1]];
      },
      scale: function(p, n) {
        return [n*p[0], n*p[1]];
      },
      add: function(a, b) {
        return [a[0]+b[0], a[1]+b[1]];
      },
      minus: function(a, b) {
        return [a[0]-b[0], a[1]-b[1]];
      }
    };


    $.path.arc = function(params, rotate) {
      for ( var i in params ) {
        this[i] = params[i];
      }

      this.dir = this.dir || 1;

      while ( this.start > this.end && this.dir > 0 ) {
        this.start -= 360;
      }
      while ( this.start < this.end && this.dir < 0 ) {
        this.start += 360;
      }

      this.css = function(p) {
        var a = ( this.start * (p ) + this.end * (1-(p )) ) * Math.PI / 180,
          css = {};

        if (rotate) {
          css.prevX = this.x;
          css.prevY = this.y;
        }
        css.x = this.x = ( Math.sin(a) * this.radius + this.center[0] +.5 )|0;
        css.y = this.y = ( Math.cos(a) * this.radius + this.center[1] +.5 )|0;
        css.left = css.x + "px";
        css.top = css.y + "px";
        return css;
      };
    };

    $.fx.step.path = function(fx) {
      var css = fx.end.css( 1 - fx.pos );
      if ( css.prevX != null ) {
       ...