How to animate a progress bar with negatives using Element.animate()

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 animation short
          transform: `translateX(${percentage}%)`
        }
      ],
      {
        fill: "forwards",
        duration: duration,
        // cut the animation short, this should run the animation to this x value of the easing function
        iterations: firstTravel
      }
    );

    // animate the second blind
    $(`.blind.${secondBlind}`)[0].animate(
      [
        {
          transform: `translateX(${currentPercentageState}%)`,
          easing: easing
        },
        {
          transform: `translateX(${percentage}%)`
        }
      ],
      {
        fill: "forwards",
        duration: duration,
        // start the iteration where the first should have left off. This should put up where the easing function left off
        iterationStart: firstTravel,
        // we only need to carry this aniamtion the rest of the way
        iterations: 1-firstTravel,
        // delay this animation until the first "meets" it
        delay: duration * firstTravel
      }
    );
  }
  // save the new value so that the next iteration has a proper from keyframe
  currentPercentageState = percentage;
}

// the following are just binding set ups for the buttons

$(document).ready(function () {
  $(".apply").click(function () {
    animate($("#amount").val());
  });

  $(".reset").click(function () {
    animate(0);
  });

  $(".random").click(function () {
    var val = (Math.random() * 2 - 1) * 100;
    $("#amount").val(val);
    animate(val);
  });

  $(".randomPos").click(function () {
    var val = Math.random() * 100;
    $("#amount").val(val);
    animate(val);
  });

  $(".randomNeg").click(function () {
    var val = Math.random() * -100;
    $("#amount").val(val);
    animate(val);
  });

  $(".flipSign").click(function () {
    animate(currentPercentageState * -1);
  });

  $(".toggleBlinds").click(function () {
    $(".blind").toggle();
  });

  $(".toggleLeft").click(function () {
    $(".blind.left").toggle();
  });

  $(".toggleRight").click(function () {
    $(".blind.right").toggle();
  });
});

animate(50);
//setTimeout(()=>animate(-100), 1050)

$(function () {
  // Build "dynamic" rulers by adding items
  $(".ruler[data-items]").each(function () {
    var ruler = $(this).empty(),
      len = Number(ruler.attr("data-items")) || 0,
      item = $(document.createElement("li")),
      i;

    for (i = -11; i < len - 11; i++) {
      ruler.append(item.clone().text(i + 1));
    }
  });
  // Change the spacing programatically
  function changeRulerSpacing(spacing) {
    $(".ruler")
      .css("padding-right", spacing)
      .find("li")
      .css("padding-left", spacing);
  }

  changeRulerSpacing("30px");
});

.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;
}

<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 have to do.</p>
<p>So, for example, if you have a value of 50, and go to -80, that's a total travel distance of 130. The first blind travels <code>50 / 130 = ~0.3846</code> of the total distance, and the second blind will travel <code>1 - ~0.3846 = ~0.6154</code> of the total distance.</p>
<p>But, these are not the correct values for the <em>duration</em> of the animation. Instead, these are the percentages of the easing values (the y-axis). To get the duration for these, I would have to find the x value (given the known y value). eg, for an ease-out animation for a value going from 50 to -80, the animation crosses our 0 at ~0.03846, and we would have to solve for x given <code>0.03846 = sin((x * PI) / 2)</code>.</p>
<p>With the help of Wolfram Alpha, I was able to find a few test values this got me much closer to the actual animation, but the blinds always stopped slightly off the mark. I eventually chalked this up to one of two reasons: the fact that the valuess are always going to be approximate and the browser is never going to be 100% accurate, or / and 2) the browser is using a slightly different easing function than I was using for reference. Regardless, being so constrained by the fact that this "animation" relies on two different aniamtions lining up perfectly, I decided to leave this version be and go in a different direction.</p>
<p>
If anyone finds an actual solution to this, please post an answer here: https://stackoverflow.com/questions/62866844/how-to-animate-a-progress-bar-with-negatives-using-element-animate
</p>