ScrollTrigger's marker not appearing when LocomotiveScroll is included

[max_knrd]

Hello,

I am currently trying to activate a CSS change with ScrollTrigger.

The website is also using LocomotiveScroll and it appears that the markers aren't displaying when I have LocomotiveScroll activated.

 

The same behavior can be seen in the codepen attached.

Removing the lines of code responsible for LocomotiveScroll, that is line 2 - 5, makes ScrollTrigger work properly, having LocomotiveScroll included however causes the markers to disappear.

This is the most minimal example I could make, that shows that behavior.

 

I have found a few posts here with similar problems however most of these could be resolved with something in the sorts of

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

Sadly, this doesn't resolve the issue for me.

Maybe I forgot something important as I am relatively new to the ScrollTrigger library.

 

As I am not sure if this a LocomotiveScroll or ScrollTrigger side problem, I am posting this problem here, too

 

Thanks in advance,

Max

See the Pen jOBZLbd by MLK97 (@MLK97) on CodePen

[elegantseagulls]

It looks like there's a console error from LocomotiveScroll that may be blocking ScrollTrigger from running.

[max_knrd]

10 minutes ago, elegantseagulls said:

It looks like there's a console error from LocomotiveScroll that may be blocking ScrollTrigger from running.

 

Thank you. That was a really embarrassing mistake where I forgot to include the data-scroll-container.

However now with the working solution the marker are asynchronously moving compared to the text.

Is this expected behavior?

 

Also resizing the codepen causes some weird behavior with the position and scrolling speed of the markers.

[akapowl]

Hey @max_knrd

 

You forgot to include the .scrollerProxy() - which is sort of the middle-man between locomotive-scroll and ScrollTrigger. Without that, ScrollTrigger will have no idea about the 'scroll-position' of locomotive-scroll because it doesn't use a native scrolling-technique but translates the content up and down instead.

 

That is also why locomotive-scroll's data-scroll-section won't work with ScrollTrigger - when you use that data-attribute on individual sections, those individual sections will get translated up and down individually but ScrollTrigger needs some reference for the ScrollPosition of the whole thing - which it gets via .scrollerProxy().

 

I took those data-attributes out and included the .scrollerProxy() here - alongside with a .defaults()-setting for the scroller (which is neccessary to set when using scrollerProxy) and things seem to work as intended. Is that better for you?

 

 

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

 

 

[max_knrd]

Hey @akapowl,

 

thank you a lot for taking the time to solve and clarify the issue.

It works perfectly now.