there is data-scroll-direction attribute missing in the attribute section of locomotive v5 beta

[asynchronousJavascriptor]

Hello 👋

Describe the bug
I was trying a horizontal scroll on a div and found out there is data-scroll-direction is missing in the docs.

To Reproduce
Steps to reproduce the behavior:

1. Go to attributes
2. there is not data-scroll-direction available.

Thank you 👊

[MontroseSt]

As per documentation:

Horizontal styles

If you are utilizing the horizontal feature, we recommend applying the following CSS rules:

/* Only necessary with horizontal scrolling */
html[data-scroll-orientation="horizontal"] {
body {
width: fit-content;
}
[data-scroll-container] {
display: flex;
}
}

[asynchronousJavascriptor]

I have applied css rule and It's still not working I have checked it it's animating tanslate3d second parameter which applies for y value and not x, I also tried data-scroll-direction and data-scroll-orientation attributes with horizontal value, here's the code snippet :

<div data-scroll data-scroll-direction="horizontal" data-scroll-speed="2" className="ss name-container w-full relative flex">
          <motion.div
            animate={{ x: "-100%" }}
            transition={{ duration: 10, ease: "linear", repeat: Infinity }}
            className="aa pointer-events-none name-wrap flex itmes-center will-change-transform"
          >
            <h1
              style={{ fontSize: "max(9em, 15vw)" }}
              className="pointer-events-none text-white flex items-center relative leading-none whitespace-nowrap"
            >
              Harsh Sharma <span className="spacer px-[100px]">-</span>
            </h1>
          </motion.div>
          <motion.div
            animate={{ x: "-100%" }}
            transition={{ duration: 10, ease: "linear", repeat: Infinity }}
            className="aa pointer-events-none name-wrap flex itmes-center will-change-transform"
          >
            <h1
              style={{ fontSize: "max(9em, 15vw)" }}
              className="pointer-events-none text-white flex items-center relative leading-none whitespace-nowrap"
            >
              Harsh Sharma <span className="spacer px-[100px]">-</span>
            </h1>
          </motion.div>
        </div>

[asynchronousJavascriptor]

Can I expect a reply from somebody, please.

[devenini]

There is no data-scroll-direction attribute. Are you trying to have only a specific part of your page scroll horizontally? If so, it's not supported out of the box, but you can achieve that with a combination of sticky positioning and utilizing the Progress feature from Locomotive Scroll. Here are a few examples of the Progress feature:

• Basic Progress
• Progress with GSAP

However, if you're attempting to make your entire page scroll horizontally, you can check our documentation and refer to this example. Basically, you need to specify lenisOptions.orientation as horizontal and add the horizontal styles.

[muhamedkarajic]

There is no data-scroll-direction attribute. Are you trying to have only a specific part of your page scroll horizontally? If so, it's not supported out of the box, but you can achieve that with a combination of sticky positioning and utilizing the Progress feature from Locomotive Scroll. Here are a few examples of the Progress feature:

• Basic Progress
• Progress with GSAP

However, if you're attempting to make your entire page scroll horizontally, you can check our documentation and refer to this example. Basically, you need to specify lenisOptions.orientation as horizontal and add the horizontal styles.

@devenini will there be one eventually? The examples you linked don't do anything horizonal with the elements at all.