JSFiddle - React, Tailwind, and code Playground

by blitzmann

HTML

<div class="wrapper">
  <div class='blind right'></div>
  <div class='blind left'></div>
</div>

<div class="ruler-container">
  <ul class="ruler" data-items="21"></ul>
</div>

<div id="buttons">
  <input id="amount" type="number" placeholder="Enter percentage..." value='-80' />
  <button class="apply">Apply</button>
  <button class="random">Random</button>
  <button class="randomPos">Random Positive</button>
  <button class="randomNeg">Random Negative</button>
  <button class="flipSign">Flip Sign</button>
  <button class="toggleBlinds">Toggle Blinds</button>
  <button class="toggleLeft">Toggle L Blind</button>
  <button class="toggleRight">Toggle R Blind</button>

  <button class="reset" href="#">Reset</button>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>

<hr />
<p><strong>A note</strong> on the attempt made here:</p>
<p>
  I was trying to animate a percentage bar that has both positive and negative values. But I set a challenge as well: I wanted to achieve this via animations utilizing only the compositor - which means animating opacity or transform <strong>only</strong> (no color, width, height, position, etc). The ideas presented here were based on the concept of blinds. I have a static element with a background gradient of red to green, then I have two elements that "blind" the user to the background. These blinds, being a simple element, simply slide into and out of place.
</p>
<p>The problem that I ran into was timing the two animations correctly when they switched signage. It's currently working (very well) for linear animation, but as soon as you introduce an easing function it gets wonky. The reason for this is due to the value that I'm using to set the first animation length (iteration, not duration), as well as the second animations start to pick up where the first left off. The value that I was using is the percentage of the total travel distance that each of the blinds will...

CSS

.wrapper {
  margin: 10px auto 2px;
  height: 10px;
  width: 600px;
  background: linear-gradient(to right, red 50%, green 50%);
  border: 1px solid black;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.blind {
  height: 100%;
  position: absolute;
  top: 0;
  background-color: rgb(51, 51, 51);
  min-width: 50%;
}

.blind.right {
  left: 50%;
  border-left: 1px solid white;
  transform-origin: left top;  
}

.blind.left {
  border-right: 1px solid white;
  transform-origin: left top;
}

#buttons {
  text-align: center;
}

/* Ruler crap */

.ruler-container {
  text-align: center;
}
.ruler, .ruler li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
    *display: inline;
}
.ruler {
  display:inline-block;
    margin: 0 auto;https://jsfiddle.net/user/login/
    background: lightYellow;
    box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
    border-radius: 2px;
    border: 1px solid #ccc;
    color: #ccc;
    height: 3em;
    padding-right: 1cm;
    white-space: nowrap;
  margin-left: 1px;
}
.ruler li {
    padding-left: 1cm;
    width: 2em;
    margin: .64em -1em -.64em;
    text-align: center;
    position: relative;
    text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
    content: '';
    position: absolute;
    border-left: 1px solid #ccc;
    height: .64em;
    top: -.64em;
    right: 1em;
}

JavaScript

let currentPercentageState = 0;
let easing = "linear";
let duration = 1000;

function animate(percentage) {
  percentage = parseFloat(percentage);

  // determine if we've crossed the 0 threshold, which would force us to do something else here
  let threshold = currentPercentageState / percentage < 0;
  console.log("Crosses 0: " + threshold);

  if (!threshold && percentage != 0) {
    // determine which blind we're animating
    let blind = percentage < 0 ? "left" : "right";

    $(`.blind.${blind}`)[0].animate(
      [
        {
          transform: `translateX(${currentPercentageState}%)`,
          easing: easing
        },
        {
          transform: `translateX(${percentage}%)`
        }
      ],
      {
        fill: "forwards",
        duration: duration
      }
    );
  } else {
    // this happens when we cross the 0 boundry
    // we'll have to create two animations - one for moving the currently offset blind back to 0, and then another to move the second blind
    let firstBlind = percentage < 0 ? "right" : "left";
    let secondBlind = percentage < 0 ? "left" : "right";
    
    // get total travel distance
    let delta = currentPercentageState - percentage;
    
    // find the percentage of that travel that the first blind is responsible for
    let firstTravel  = currentPercentageState / delta;
    let secondTravel = 1 - firstTravel;

    console.log("delta; total values to travel: ", delta);
    console.log(
      "firstTravel; percentage of the total travel that should be done by the first blind: ",
      firstTravel
    );
    console.log(
      "secondTravel; percentage of the total travel that should be done by the second blind: ",
      secondTravel
    );
    
    // animate the first blind.
    $(`.blind.${firstBlind}`)[0].animate(
      [
        {
          transform: `translateX(${currentPercentageState}%)`,
          easing: easing
        },
        {
          // we go towards the target value instead of 0 since we'll cut the...