Two instances of scrollTrigger

[csp]

Is it possible to have 2 instances of scrollTrigger? I currently have one instance on one component and then another on the component just beneath it and I'm getting some strange behavior. Side question, is it possible to use variables like vh for end values? Thanks!

[Rodrigo]

Hi,

 

You can have as many ScrollTrigger instances as you want/need, just be super careful about creating them in the order they appear on the screen. Unfortunately without a minimal demo there is not a lot we can do to help you. You can fork this codepen in order to create a small demo that clearly illustrates the issue you're having, no need for your entire project, just a few colored divs.

 

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

2 hours ago, csp said:

Side question, is it possible to use variables like vh for end values?

I don't see why not, but it might be safer to use percentages since ScrollTrigger makes all the calculations based on the viewport's height and is 100% reliable. Personally I always use percentages without any issues:

ScrollTrigger.create({
  trigger: ".my-element",
  start: "top top",
  end: "+=250%",
});
// This will end when the scroll position has moved 2.5 times
// the height of the viewport after the start point, since is
// a relative value because of +=

Hopefully this helps.

Happy Tweening!

[csp]

Thanks Rodirigo, the percentage info helped solve my problem for why the second instance wasn't working properly. Thank you so much!