[Locomotive Scroll & ScrollTrigger]

Hi, I need help with the scrolltrigger, I made a horizontal scroll website with the help of Locomotive Scroll, I need to use the scrolltrigger but I don't know how to set it up. My goal is to be able to add animations when I scroll to some section (for example, in the second section I want the image to be displayed only when I'm halfway through the second section), is it possible to do this?

 

I found something similar, but it's vertical scroll and I need horizontal 

See the Pen zYrELYe by GreenSock (@GreenSock) on CodePen

[SmoothScroll horizontal effect]

Hi, this is the current website 

[SmoothScroll horizontal effect]

Hello, I'm new to gsap, but I managed to make a horizontal scroll together with smoothscroll, but I have one problem, I need the effects in the horizontal scroll to move horizontally and not vertically, how can I do it? I want to have it similar to this website https://zandbeek.com/

 

This is the code I'm using now:

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

 

const smoother = ScrollSmoother.create({

 wrapper: "#smooth-wrapper",

 content: "#smooth-content",

 smooth: 2,

 normalizeScroll: true,

 effects: true,

 preventDefault: true

});

 

//Horizontal Scroll

 

let sections = gsap.utils.toArray(".box");

 

let scrollTween = gsap.to(sections, {

  xPercent: -100 * (sections.length - 1),

  ease: "none", // <-- IMPORTANT!

  scrollTrigger: {

    trigger: ".scroll-container",

    pin: true,

    scrub: 2  ,

    markers: true,

    invalidateOnRefresh: true,

    end: "+=4000"

  }

});