Help to create Horizontal Scrolling Effect

[Boboiboy181]

I'm new to the world of animation and I've just found Anime.js a month ago and I really love it.
Right now, I'm practicing to make some animations. One of them is "horizontal scrolling", like other lib, it offers some tools to access the scrollYProgress to achieve the effect. But with Anime.js, I can't find a similar one yet. Have any one make this animation before 😁 Thank you so much for anwser 🥰

This is the reference from GSAP: ref

[Boboiboy181]

I've found a solution guys 😄

[Boboiboy181]

// This is the usage of anime.js
 animate(".scroll-target", {
        x: [0, "-300vw"],
        autoplay: onScroll({
          container: ".scroll-container",
          // Enters when the bottom of the target meets the center of the container
          enter: { target: "bottom", container: "center" },
          // Leaves when the top of the target meets the top of the container
          leave: { target: "top", container: "top" },
          sync: 1,
          debug: true,
        }),
      });

// This is the sample Element
<div ref={root} className="scroll-container text-center flex h-[calc(200vh)]">
    <div className="sticky top-0 h-screen w-screen flex items-center overflow-hidden">
      <div className="flex scroll-target">
        <div className="section w-screen py-10 flex-1 bg-blue-200">
          <h1 className="appName text-5xl font-bold">iPortal.one</h1>
          <p className="appDscr mt-4 text-lg text-gray-600">
            A simple and powerful portal for your business.
          </p>
          <Image
            className="dark:invert mx-auto mt-8 logo"
            src="/react.svg"
            alt="React.js logo"
            width={100}
            height={38}
            priority
          />
        </div>
        <div className="section w-screen py-10 flex-1 bg-green-200">
          <h1 className="appName text-5xl font-bold">iPortal.one</h1>
          <p className="appDscr mt-4 text-lg text-gray-600">
            A simple and powerful portal for your business.
          </p>
          <Image
            className="dark:invert mx-auto mt-8 logo"
            src="/react.svg"
            alt="React.js logo"
            width={100}
            height={38}
            priority
          />
        </div>
        <div className="section w-screen py-10 flex-1 bg-red-200">
          <h1 className="appName text-5xl font-bold">iPortal.one</h1>
          <p className="appDscr mt-4 text-lg text-gray-600">
            A simple and powerful portal for your business.
          </p>
          <Image
            className="dark:invert mx-auto mt-8 logo"
            src="/react.svg"
            alt="React.js logo"
            width={100}
            height={38}
            priority
          />
        </div>
        <div className="section w-screen py-10 flex-1 bg-slate-200">
          <h1 className="appName text-5xl font-bold">iPortal.one</h1>
          <p className="appDscr mt-4 text-lg text-gray-600">
            A simple and powerful portal for your business.
          </p>
          <Image
            className="dark:invert mx-auto mt-8 logo"
            src="/react.svg"
            alt="React.js logo"
            width={100}
            height={38}
            priority
          />
        </div>
      </div>
    </div>
  </div>