Change background-position horizontal transition for color on scroll jQuery/CSS

Question

I recently saw this website - https://www.wokine.com/ - where on scroll() the background-position changes from linear gradient with two colors to slide one color off the screen. I learned how they created the split colors with linear-gradient, but I can't figure out how they are doing the animation with the red color 'pushing' the white color horizontally off the screen.

Here is one of the more recent things I've tried. Ultimately, I want to do it on scroll but I was trying it on click for now. I kept the hover style in there for testing.

$(document).ready(function() {
  $("button").click(function() {
    $(".box").css('background-position': 'left');
  });
});

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-size: 200% 200%;
  transition: background-position 1s;
  background-image: linear-gradient(to right, blue 50%, green 0);
  background-position: right;
}

.box:hover {
  background-position: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="box"></div>
<br>
<button>Toggle background position</button>

Answer 1

Following the link you shared, I'm using Scroll event and that's your ultimate goal from what I understand.

So we can use $(document).ready() or $(window).on('load',.. to initiate with the first animation using the class .intro.

---

Then depending on scroll direction we toggle between two classes .slideleft and .slideright. If that's a confusing choice of class names you can call them Up and Down.

$(document).ready(function() {
  $('.box').addClass('intro');
});
(function() {
  var lastScroll = 0;
  $(window).on('scroll', function() {
    if ($(".box").is(".intro")) {
      $('.box').removeClass('intro');
    }
    var activeScroll = $(this).scrollTop();
    //We check the scroll direction
    cond = Boolean(activeScroll > lastScroll);
    //each background sliding effect follow it's scroll direction
    $(".box").toggleClass('slideleft', cond); //DownScroll
    $(".box").toggleClass('slideright', !cond); //UpScroll
    lastScroll = activeScroll;
  });
}());

.box {
  width: 100%;
  height: 200px;
  display: inline-block;
  background-size: 200% 200%;
  transition: background-position 1s;
  background-image: linear-gradient(to right, #ff5851 50%, #F8F8F8 50%);
  background-position: left;
}

.intro {
  background-position: 50%;
}

.slideleft {
  background-position: left center;
}

.slideright {
  background-position: center center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<div class="lorem">
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>