ScrollTrigger and Horizontal Scrolling with Locomotive Scroll (using scrollerProxy)

[aleksandrevic]

Dear community,

I've implemented smooth and horizontal scrolling with locomotive scroll and I now want to use ScrollTrigger to control animations based on the horizontal scroll progress. Therefore, I've implemented the scrollerProxy function, which only works if I set my page to vertical scrolling via Locomotive Scroll. In general I face two issues:

1. I cannot use ScrollTrigger with horizontal scrolling of Locomotive Scroll
2. I cannot use Locomotive Scroll's data-scroll-sections to split the page (e.g. for better performance).

Please find my implementation of scrollProxy:

 

const scrollContainer = document.querySelector('#scrollable');

const locoScroll = new LocomotiveScroll({
	el: scrollContainer,
	smooth: true,
	direction: 'horizontal',
	gestureDirection: 'vertical',
	getSpeed: true,
	getDirection: true,
	useKeyboard: true,
	multiplier: 0.8,
	firefoxMultiplier: 1.6
});

gsap.registerPlugin(ScrollTrigger);

locoScroll.on("scroll", ScrollTrigger.update);

ScrollTrigger.scrollerProxy(scrollContainer, {
	scrollTop(value) {
		return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
	},
	scrollLeft(value) {
		return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x;
	},
	getBoundingClientRect() {
		return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
	},
	pinType: scrollContainer.style.transform ? "transform" : "fixed"
});

ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();

Based on this, I tried something like the following:

 

let trigger = gsap.timeline({

    scrollTrigger: {
        trigger: "#section",
        start: "left right",
        end: "left center",
        markers:true
    }
});

trigger.from(".element", {
    x: "200px"
    })

 

The markers do show up, however they are placed for in a way that it looks like scrollTrigger is expecting vertical scrolling. The animation doesn't work at all - nothing happens. Could somebody please help me out? What could I provide you with in order to help me?

 

Thanks,

Aleks

[akapowl]

 

Hello and welcome to the forums @aleksandrevic

 

2 hours ago, aleksandrevic said:

I cannot use ScrollTrigger with horizontal scrolling of Locomotive Scroll

 

If you have a horizontal scrolling approach like that, try setting horizontal: true on your scrolltrigger - it should work then.

If it still doesn't, a minimal demo to take a look at would really be appreciated.

 

Here is an example showing how/that it works like that (the empty space at the end is related to the markers - it will not be there anymore when you deactivate them)

 

See the Pen 91316a6974c7d27b5796b456d3ad59d8 by akapowl (@akapowl) on CodePen

 

 

 

2 hours ago, aleksandrevic said:

I cannot use Locomotive Scroll's data-scroll-sections to split the page (e.g. for better performance)

 

That is a problem that has already come up quite often.

If you search for 'data-scroll-section' in these forums, you'll find quite a few threads about that. 

 

Here is the same example with the data-scroll-section attribute added to the sections.

 

See the Pen 40a1b6c99009c3ddbaed120d77816198 by akapowl (@akapowl) on CodePen

 

 

 

As a little sidenote:

The layout shifts if you don't adjust the CSS for the [data-scroll-section] from height: 100% to height: 100vh in this case - I additionaly did that here.

 

Furthermore;

The non-pinning ScrollTriggers will/should work as expected here.

 

But sections with the [data-scroll-section] will be told by locomotive-scroll to keep on translating/moving with the scroll - not matter what - so pinning ScrollTriggers on sections with that attribute will/can simply not work and you'll see the content of that section disappear/flicker there.

 

Hope that's somewhat helpful. 

 

Edit:

Just as a quick addition, since I just realized that it is missing in your code;

You will need to specify the scroller on your ScrollTriggers too, for it to work with locomotive scroll.

 

[aleksandrevic]

Dear @akapowl,

thank you so much for laying out the solution in such detail. I'm fairly new to all this, however, your explanation makes it easy.  Yes  it took me like 30 minutes to figure out that I'd have to specify the scroller. Everything works the way you described.

Thank you,

Aleks