ScrollSmoother across multiple files on the same page

[LMWR]

Hello everyone,
I'm stuck on an issue that I can't resolve regarding using ScrollSmoother at the same time as ScrollTrigger.
In a web page, I have 3 JS files which take care of different things: main.js (basic file, common to many pages), header.js (takes care of the behavior of my header) and summary. js (which takes care of a component in the page). These 3 files are compiled by Webpack, so namespaces may change.
In main.js I instantiate ScrollSmoother

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ScrollSmoother } from 'gsap/ScrollSmoother';
gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
ScrollSmoother.create({
    smooth: 1,
    effects: true
})

In header.js I "pin" my header with ScrollTrigger and in summary.js I also "pin" a menu item.

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ScrollSmoother } from 'gsap/ScrollSmoother';
gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
ScrollTrigger.create({
  trigger: this.container,
  pin: this.summary,
  start: 'top 15px',
  end: `bottom ${this.summary.clientHeight + 15}px`,
  markers: false
})

The problem is that without activating ScrollSmoother, the 2 pins work perfectly but as soon as I activate ScrollSmoother, the pins are no longer sticky.
The sticky behavior of the header and summary works again if I instantiate ScrollSmoother each time (so 3 times) but I feel that it is buggy because when scrolling it has "jumps".

Do you know how I can make ScrollTrigger instances work correctly with ScrollSmoother across different files?

 

Codesandbox demo : https://codesandbox.io/p/devbox/scrollsmoother-gt8pql

 

Thank you in advance

I tried to be as clear as possible in explaining my problem...

 

Matt

[GreenSock]

CodeSandbox seems to be broken at the moment, and they've updated their business model so now they're forcing people to pay in order to fork a project (well, they give you a minimal threshold of those) which makes it pretty difficult to troubleshoot here. I noticed you're importing BOTH "gsap" AND "gsap-trial" and you're using ScrollTrigger from the trial on one page, and the regular "gsap" one on the other. Can you try importing everything from the trial package please? Does that resolve things? If not, would you mind providing a Stackblitz instead of a CodeSandbox since that seems to be broken at the moment? 

[LMWR]

Thanks Jack for the response.

I actually changed the imports on CodeSandbox and it works.
Here is a project on Stackblitz: https://stackblitz.com/edit/vitejs-vite-cmdwqx?file=index.html . It is also perfectly functional because the names of the variables in the compiled files have not been modified.

 

I am unable to reproduce the case of my current project on a sandbox. My files are compiled by webpack and for example, the variables names become something like this:

main.js in dev mode :

gsap__WEBPACK_IMPORTED_MODULE_12__.gsap.registerPlugin(gsap_ScrollTrigger__WEBPACK_IMPORTED_MODULE_13__.ScrollTrigger, gsap_ScrollSmoother__WEBPACK_IMPORTED_MODULE_14__.ScrollSmoother);

main.js in production mode :

Wn.registerPlugin(hc,ls);

 

header.js in dev mode :

gsap__WEBPACK_IMPORTED_MODULE_12__.gsap.registerPlugin(gsap_ScrollTrigger__WEBPACK_IMPORTED_MODULE_13__.ScrollTrigger, gsap_ScrollSmoother__WEBPACK_IMPORTED_MODULE_14__.ScrollSmoother);

header.js in production mode :

qn.registerPlugin(Ga,ws);

I wonder if it's possible to pass the single instance of the Scrollsmoother project to the different instances of Scrolltrigger? Via variables at initialization or by another method.

Otherwise, I can see on my side to configure webpack so that it preserves the names of variables/imports.

Thank you very much for the time spent on this problem 😕

 

Matt

[akapowl]

 

Hello there.

To me this actually sounds a lot more like it might be an issue with your webpack configuration than anything related to GSAP.
Which also makes me wonder, why you provide an example using vite, when you are actually using webpack in production 🤔

Below is an example that shows it working across multiple files.

I just had to make sure to properly set the entry in the webpack configuration to an array of the pages I wanted to be bundled instead of just the default single file reference - because else webpack of course won't even know other js files you want to include do exist.

Also since I wanted to access something stored in a variable in one file from another file, I needed to export it from that one file I created that varaible in, and import it in that other file I wanted it to be accessed in. That is just a small console.log of the smoother variable in header.js  - but ScrollSmoother itself will still work without importing it there.

 

Maybe that can help get you started finding the problem in your configuration.

https://stackblitz.com/edit/webpack-webpack-js-org-fzollb?file=src%2Fmain.js