For the locomotive scroll how to move horizontally when scrolling vertically

[gsapmonkey]

Hi,

 

I am using locomotive scroll for the first time. I am facing some issue with moving  horizontally when scrolling up or scrolling down. 

I am trying to have a effect like this website

https://polygondesign.com.au/

 

It scrolls fine when I horizontally scroll on mousepad but not vertically up or down swipe on mac book. 
Highly appreciate any ideas or suggestions. thanks

 

The attached codepen doesnt have the problem but attached to just give idea on what should be happening when scroll up and down. same behavior doesnt happen on my website.

 

(I wonder if this is anything to do with any css issue)

document.addEventListener('DOMContentLoaded', function() {
    var container = document.querySelector('#page');
    // Initialize Locomotive Scroll
    var lscroll = new LocomotiveScroll({
        el: container,
        smooth: true, // Enable smooth scrolling
        horizontal: true, // Enable horizontal scrolling
        multiplier: 2
    });

    // Add event listener for wheel event - DOESNT HORIZONTALLY MOVE WHEN VERTICALLY SCROLLED
    container.addEventListener("wheel", (evt) => {
        evt.preventDefault();
        container.scrollLeft += evt.deltaY;
    }, {
        passive: false
    });

});

 

 

 

See the Pen gOmgRzL by alvarotrigo (@alvarotrigo) on CodePen

[mvaneijgen]

We like to scope these forums to GSAP only questions. Locomotive scroll is a third party plugins that we can't provide support for. We de however have our own smooth scroll library called ScrollSmoother which works out of the box with all the GSAP tools!

 

If you must use Locomotive scroll I would advise you do check if they have a support forum or otherwise I welcome you to use ScrollSmoother  https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Hope it helps and happy tweening! 

[gsapmonkey]

I am not particularly tied to locomotive scroll. Whatever can achieve the goal is fine. Do you know if this effect can be achievable in ScrollSmoother? Is there a close enough demo example of what I am looking for? Any ideas would be helpful. Thank you so much!

 

The screen should be able to scroll smoothly in horizontal direction with any wheel event whether up/down or sideways just like in https://polygondesign.com.au/. 

[mvaneijgen]

Yes just create an animation that animates the thing on the x-axis and then hook it to ScrollTrigger, then just add ScrollSmoother to the page and you're done. 

 

Here is an example. But I would just build it from scratch and just tackle one part at a time, first your layout with CSS then the animation, add ScrollTrigger to the animation and then at last add ScrollSmoother (keep in mind this plugin is only accessible for our members, but you can freely use them on things like Codepen to test them out!). If you still need help please provide a minimal demo with what you've tried and someone here will be happy to point you in the right direction. 

 

See the Pen dydpJzY?editors=0010 by GreenSock (@GreenSock) on CodePen

[gsapmonkey]

Thank you so much! I will give it a try and see. 

[Rodrigo]

Hi,

 

@akapowl one of the forums superheroes created this nice demo using locomotive that you can check:

See the Pen wvJroYy by akapowl (@akapowl) on CodePen

 

Happy Tweening!