How to give ease animation when adding scrolleft?

I’m building a horizontal scrolling div, something like a slider.
Something like this

The thing is, this thing is between other contents, so I had to use a custom javascript code that I found online to make this horizontal sliding div act like a vertical div.

`

     (function () {
        init();

        var g_containerInViewport;
        function init() {
          setStickyContainersSize();
          bindEvents();
        }

        function bindEvents() {
          window.addEventListener("wheel", wheelHandler);
        }

        function setStickyContainersSize() {
          document
            .querySelectorAll(".sticky-container")
            .forEach(function (container) {
              const stikyContainerHeight =
                container.querySelector(".container").scrollWidth;
              container.setAttribute(
                "style",
                "height: " + stikyContainerHeight + "px"
              );
            });
        }

        function isElementInViewport(el) {
          const rect = el.getBoundingClientRect();
          return (
            rect.top <= 0 && rect.bottom > document.documentElement.clientHeight
          );
        }

        function wheelHandler(evt) {
          const containerInViewPort = Array.from(
            document.querySelectorAll(".sticky-container")
          ).filter(function (container) {
            return isElementInViewport(container);
          })[0];

          if (!containerInViewPort) {
            return;
          }

          var isPlaceHolderBelowTop =
            containerInViewPort.offsetTop < document.documentElement.scrollTop;
          var isPlaceHolderBelowBottom =
            containerInViewPort.offsetTop + containerInViewPort.offsetHeight >
            document.documentElement.scrollTop;
          let g_canScrollHorizontally =
            isPlaceHolderBelowTop && isPlaceHolderBelowBottom;

          if (g_canScrollHorizontally) {
             containerInViewPort.querySelector(
              ".projAnimContainer"
            ).scrollLeft += evt.deltaY;

          }
        }
      })();

This code works.
It does stick the div when user comes to that div, and its not letting the user go down till he finishes scrolling that horizontal div.
So user scrolls down, comes to the slider div, slides(scrolls down) but it doesn’t scroll down but scrolls to right. And after user finishes scrolling in that div and div ends, it leaves the user and user can continue the rest of the website as normal.

It works as I said but the problem is I dont want it to scroll ugly.
I want it to scroll smooth.

            containerInViewPort.querySelector(
              ".container"
            ).scrollLeft += evt.deltaY;

This is the action that adds the scrolling horizontally to my div.
I’ve tried changing it with this

   document.querySelector(".container").scrollBy({
              top: 0,
              left: +evt.deltaY,
              behavior: "smooth",
            });

and

            $(".container").animate(
              { scrollLeft: "+=" + evt.deltaY + "" },
              1000,
              "easeOutSine"
            );

this..

Both didn’t work.
They try to work but they can’t, I mean for example if I change the code with the jquery one (easeoutsine one), it scrolls 1 time with ease thats good but then jumps to the end of the div and scrolling more up or down doesn’t work. it stuck.
And if I use the other document.query… one it tries to scroll with ease but the scrolling to right effect ends and it goes to the next content after this slider without finishing the slider completely. I think when I add ease, it adds more px than it should and It finishes the slider before it should.

I hope I managed to describe my question.
Thanks all.

I’ve tried jquery and normal ease animations.