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

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