[ScrollTrigger's marker not appearing when LocomotiveScroll is included]

Hey @akapowl,

 

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

It works perfectly now.

 

 

[ScrollTrigger's marker not appearing when LocomotiveScroll is included]

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.

[ScrollTrigger's marker not appearing when LocomotiveScroll is included]

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