SmoothScroll horizontal effect

[lucasdesign]

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"

  }

});

[Rodrigo]

Hi @lucasdesign and welcome to the GreenSock forums!

 

Is really hard for us to solve an issue without a minimal demo, so the only thing I can do in this case is, based on the example you posted and the description you provide, recommend you to use a container animation in ScrollTrigger with ScrollSmoother:

https://greensock.com/3-8#containerAnimation

 

Here is a live example of how it works and how is implemented:

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

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

[lucasdesign]

Hi, this is the current website 

[Rodrigo]

Hi,

 

We can't debug live sites/apps since is impossible for us to take a look at the code there.

 

If you have a GSAP specific question, we're happy to help you with that. Just remember to create a minimal demo (not your entire setup, just a few lines of code and some colored divs that illustrate the problems you are having).

 

Finally, take a look at the container animation examples and the ScrollTrigger + ScrollSmoother example I posted before in order to get a good grasp on how you can implement them.

 

Happy Tweening!