Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
max_knrd

ScrollTrigger's marker not appearing when LocomotiveScroll is included

Go to solution Solved by akapowl,

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites
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.

Link to post
Share on other sites

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

 

 

  • Like 5
Link to post
Share on other sites

Hey @akapowl,

 

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

It works perfectly now.

 

 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×