ScrollTrigger - Conflict when using 2 instances in the same page.

[FillipeMontenegro]

Hello,

 

When using two instances of the ScrollTrigger, it seems that the first instance breaks.

I have used unique names for the variables, functions, so I'm not sure that's the issue.

 

For context: the page is on a HubSpot site.

 

I have isolated the issue as much as possible on this page https://www.momentumm.co/scrolltrigger-conflict-isolated (password is testgsap123)

 

Any clue on why this might be happening or how to fix it is very much appreciated!

[FillipeMontenegro]

https://www.momentumm.co/scrolltrigger-conflict-isolated?showMarkers=true

 

To activate the markers.

[Toso]

 

[GSAP Helper]

Thanks for providing a link, but we can't effectively troubleshoot a live web site. If you'd like some help, please provide a minimal demo, like a CodePen or Stackblitz that clearly illustrates the problem and we'd be happy to take a look. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[FillipeMontenegro]

Here's a codepen of the issue: 

See the Pen jOJMJqJ by FillipeMontenegro (@FillipeMontenegro) on CodePen

[GreenSock]

Oh, that's just a JavaScript logic problem in your code (unrelated to ScrollTrigger/GSAP)...

 

You're re-assigning the window.onload event multiple times, so it only works for the last one you assigned it to before the event fires. In other words, window.onload cannot be MULTIPLE functions. It can only be one thing. It would be sorta like re-assigning a variable: 

 

let value = "1";
value = "2";
value = "3";

console.log(value); // 3

So you're doing this: 

window.onload = function1;
window.onload = function2;

// now if you call window.onload(), it would invoke function2

I think you meant to add an event listener. That way, it can be as many functions as you want - they'd all just be listening for that event: 

 

// BAD
window.onload = function () {
  widget_1704982819595startScroller();
};
window.onload = function () {
  module_17049828648214startScroller();
};

//GOOD
window.addEventListener("load", widget_1704982819595startScroller);
window.addEventListener("load", module_17049828648214startScroller);

Does that help?

[FillipeMontenegro]

Thank you very much. Yes, it was most likely the error. I am running into another issue now ("ScrollTrigger is not defined") which is what was the issue I had before (which led me to move away from the addEventListener - nonetheless, I had not realized I was overwriting the window.onload, thank you for point that out).

 

So I will mark your reply as a solution, since my issue now is another one.

 

Thank you!