The problem is that I have to create animation translation cards like in this website https://www.chrls.design/
Do you have any suggestions?

I prefer to use pure js, but JQuery is also good

function disableScroll() {
    document.querySelector("html").setAttribute("style", "overflow-y: hidden");
  }
  function enableScroll() {
    document.querySelector("html").setAttribute("style", "overflow-y: auto");
  }

  function disableCardsScrollHack(withDisable) {
    if (withDisable) {
      advantageCard1.addEventListener(
        "animationstart",
        function () {
          disableScroll();
        },
        false
      );
      advantageCard1.addEventListener(
        "animationend",
        function () {
          enableScroll();
        },
        false
      );
      advantageCard2.addEventListener(
        "animationstart",
        function () {
          disableScroll();
        },
        false
      );
      advantageCard2.addEventListener(
        "animationend",
        function () {
          enableScroll();
        },
        false
      );
      advantageCard3.addEventListener(
        "animationstart",
        function () {
          disableScroll();
        },
        false
      );
      advantageCard3.addEventListener(
        "animationend",
        function () {
          enableScroll();
        },
        false
      );
    }
  }

  function slideCards(direction) {
    let proportion = stackArea.getBoundingClientRect().top / window.innerHeight;
    if (proportion <= 0.5) {
      let n = sliderCards.length;
      let index = ((proportion * n) / 2).toFixed(1);
      if (index <= 1 && index > 0.6) {
        if (direction === "UP") {
          advantageCard1.classList.remove("active-down");
          advantageCard1.classList.add("active-up");
        } else {
          advantageCard1.classList.remove("active-up");
          advantageCard1.classList.add("active-down");
        }
        disableCardsScrollHack(true);
      }
      if (index <= 0.6 && index > 0.2) {
        if (direction === "UP") {
          advantageCard2.classList.remove("active-down");
          advantageCard2.classList.add("active-up");
        } else {
          advantageCard2.classList.remove("active-up");
          advantageCard2.classList.add("active-down");
        }

        disableCardsScrollHack(true);
      }
      if (index == 0.2) {
        if (direction === "UP") {
          advantageCard3.classList.remove("active-down");
          advantageCard3.classList.add("active-up");
        } else {
          advantageCard3.classList.remove("active-up");
          advantageCard3.classList.add("active-down");
        }

        disableCardsScrollHack(true);
      }
      if (index < 0.2) {
        if (direction === "UP") {
          advantageCard1.classList.add("active-down");
          advantageCard2.classList.add("active-down");
          advantageCard3.classList.add("active-down");
          disableCardsScrollHack(false);
        }
      }
    }
  }

  function windowScroll() {
    if (this.oldScroll < this.scrollY) {
      slideCards("BOTTOM");
    } else {
      slideCards("UP");
    }
  }

  window.onscroll = function (e) {
    windowScroll();
    this.oldScroll = this.scrollY;
  };

I wrote some bullshit using disable scroll and add some animation, but I need more suitable code)
I saw that in this (https://www.chrls.design/) website they use three js library, maybe you have any examples with using this one