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.

[iamluxan]

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.

Hello Devenini,
I’m also experimenting with horizontal scrolling for some components on a vertically scrolling page.
I understand that you recommend using sticky positioning and the –progress variable, but I’m not sure how you suggest implementing the scrolling? Should I use GSAP? Is there any demo available, even a minimal one fo horizontal component inside vertical scrolling page ?

Currently, I’m using the GSAP timeline to update the scroll, but I find that it’s a lot of code just to update the transform.

I checked on https://matelibre.com and https://lvcidia.xyz/gallery/fvckrenderverse

but what is the formula for the correct translate3D value on scroll ?
I wrote this :
let to_scroll = (Math.round(progress * this.calculatePanelHeight())); (calculatePanelHeight is the virtual height : total width of items)

I calculated the height of the component, added it with sticky positioning, but I’m missing that dynamic scroll with ‘transform: translate3d($val, 0px, 0px);’“

GSAP :

Your (how to ?)

Thank you very much!