Jump to content
Search Community

scrollerProxy in node environment not working as expected

Sascha Fincher test
Moderator Tag

Recommended Posts

Having an issue with scrollerProxy which I don’t understand.

 

Hi all,

 

I am using ScrollTrigger and Locomotive Scroll in a node environment

 

My structure is the following:

 

main.js (this code will be used on all pages of the website)

  • import gsap
  • imports scrolltrigger
  • imports locoscroll
  • initializes locoscroll 
  • initializes the scrollerproxy
  • exports the scroller proxy

--> scrolltrigger working just fine

 

home.js (this code is only being used on the home page)

  • import gsap
  • import scrolltrigger
  • imports the scroller proxy (value “.smooth-scroll”)

 --> scrolltrigger NOT working. E.g. all markers move with the scroll. It seems like the scroller proxy is not recognized. When I copy the same code to main.js it’s just working fine.

 

Does anyone have an explanation for this?

 

 

 

 

 

Link to comment
Share on other sites

This cannot be the reason. I register scrolltrigger after the DOM is ready and I can see all objects that I need for the animation. There are no errors in the console - not even warnings.

 

I do understand that this is super hard to analyze, but I cannot reproduce this in a codepen for obvious reasons.

Link to comment
Share on other sites

My only other guess is maybe you're setting up a scroller proxy in one environment that's contaminating another(?). For example, if you tell ScrollTrigger that for the main <body> it should use a proxy (so that you can leverage LocomotiveScroll), and then in the same app (still in the browser, no refresh), you've got ScrollTriggers set up on the <body> it'd still be trying to pull that data from the LocomotiveScroll(?) I'm just taking shots in the dark here. 

Link to comment
Share on other sites

3 hours ago, GreenSock said:

My only other guess is maybe you're setting up a scroller proxy in one environment that's contaminating another(?). For example, if you tell ScrollTrigger that for the main <body> it should use a proxy (so that you can leverage LocomotiveScroll), and then in the same app (still in the browser, no refresh), you've got ScrollTriggers set up on the <body> it'd still be trying to pull that data from the LocomotiveScroll(?) I'm just taking shots in the dark here. 

Not sure I fully understand what you mean.

 

In  main.js (common code) I initialize loco scroll and set the scroller proxy to my smooth scroll container.

In home.js (page specific code) I just use scroll trigger and pass the smooth scroll container to "scroller:"

 

I can see the markers in the DOM being attached to the smooth-scroll container, but they are not moving at all.

 

Link to comment
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.
×
×
  • Create New...