Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sascha Fincher

scrollerProxy in node environment not working as expected

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

It' super difficult to troubleshoot blind, but perhaps you didn't gsap.registerPlugin(ScrollTrigger)? And that must be done when the window/document/body exists because ScrollTrigger needs those things to function. 

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

Thanks everyone,

 

I figured it out. By copying stuff over to codesandbox, I realised that it was a problem with my webpack configuration and the order of execution.
 

ScrollTrigger in home.js got actually called before the scroller proxy in main.js was assigned. 
 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thanks for popping back to let us know!

  • Like 1
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.
×