Lenis horizontal scroll not working

[Caspert]

Hi all,

I am trying to achieve a horizontal scroll with Lenis like the example on the main page of Lenis. On page scroll (up and down) the page is animated left and right with Lenis smooth scroll. To get the same effect I've done this by the following:

window.addEventListener('wheel', (e) => { scrollContainer.scrollLeft += e.deltaY; });

This is working properly, but the Lenis plugin is not smoothing the scroll out. I tried different options, but with no result.
I made a codepen where I setup the Lenis library as documented on the main page and changed the orientation to horizontal.

import Lenis from "https://esm.sh/@studio-freight/lenis";

const scrollContainer = document.querySelector("main");

const lenis = new Lenis({
  // lerp: 1,
  // wheelMultiplier: 1,
  orientation: 'horizontal',
  content: scrollContainer,
  // easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
});

lenis.on('scroll', (e) => {
  console.log(e);
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

Can anyone help me out, since I see different websites using Lenis for horizontal page designs like https://axelvanhessche.com/works/summer-market

If there are any question, please feel free to ask.
Casper

[clementroche]

you must use gestureOrientation: "both" and remove the overflow-x: hidden on

https://codepen.io/ClementRoche/pen/MWdRXJK

[ynsmrsk]

vertical gesture does not trigger horizontal scrolling on mobile, unlike desktop. is there any workaround for this?

[clementroche]

it does with "syncTouch: true"