xoxoxoxo

Hey, I have a use case where I might require 5-10 or 10-15 triggers on the page. My use case is, I need to change fixed nav's color based on triggered div background color and I might do this using onActive callback, setting a global variable whenever the trigger is active. Has anyone tested this many triggers in the wild? Does it scale well? Any performance issues?

Thanks! this is working as expected.

Yes, can you please send over the ES Module of the upcoming ScrollTrigger?

The docs mentions that this was added in version 3.3.4 which can be misleading?

Ouch! When are you planning to release the new version on npm?

I've created a minimal codesandbox You can see it logs on refresh.

I just tested by adding a console log in my the refresh listener and it does log every time. Prior to the log I tested with markers and on resize my markers adjusted. I hope this isn't a version related issue?

I have removed the resize event above as you mentioned however on resize my Scrolltriggers still gets refreshed. I'm using gsap's 3.5.1 version via npm. I won't paste every variable declaration here but to get the gist this is how I'm setting the config. if (process.browser) { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.config({ autoRefreshEvents: 'visibilitychange,DOMContentLoaded,load', }); } function Component() { React.useEffect(() => { const st = ScrollTrigger.create({ ... }); return () => st.kill(); }, []); return ... }

Let me try to re-phrase my issue. I'm setting the Scrolltrigger's config object with Scrolltrigger.config() specifically autoRefereshEvents and it doesn't seem disable a specific event. I'd like to ensure if the config object is being set properly or at the right time. How can I read the config object?

Huh? those aren't the parameters I'm referring to though. I'm referring to the config object that is set with ScrollTrigger.config

How can I ensure if the config has been set to the right options? I can't happen to read Scrolltrigger's config object anywhere. I was also looking under `gsap.plugins` but no luck here.

Is there such a delay when you create scroll triggers? Such as `Scrolltrigger.create()`?

What's the current delay to fire refresh on resize event or the events listed above?

Thanks! Will try this tonight. Would be great to change throttle time as well.

Is it possible to change the delay on resize event so it refreshes faster? If not, is it possible to completely disable refresh on resize which Scrolltrigger ships with and add your own event instead?

Have you looked at the latest demo video? Do you see how the image gets stuck half way through because the refresh event has a delay.

Of course this issue can be solved by removing the end prop because my div height is always consistent. What if the end prop is '+=300%' or a static value? The issue persists.

If you notice in the video there's a slight delay on the end position, Is this because the change is synced with rAF or something? The delay in the end position yields in an odd behavior on mobile because I have images inside the div which are meant to be centered and when the end position changes, it looks like the image is "stuck" and can't fully each the top edge of the browser. Creating a codepen for this issue makes no sense because it renders in an iframe. Im attaching an html/css file perhaps you can run it locally and test it on mobile. Here's another demo scroll-bug-demo.zip

An issue I came across on mobile especially on iOS where the end value jumps because the mobile browser UI resizes. This behavior happens when I define an explicit end prop such as: ScrollTrigger.create({ trigger: '.panel', pin: true, start: 'top top', end: '+=100%', pinSpacing: false, markers: true, }); Here's a video recording: link This behavior doesn't happen when I remove the end prop.

@ZachSaucier I have just discovered the InertiaPlugin and was wondering if i can pair it with what i'm trying to achieve in the demo? Basically the ball constantly moves and when it hits the viewport walls it bounces off. The solution I have going, it sporadically restarts without hitting any edges.

Thnx, it worked!

I have a ball that bounces when it reaches the edges of viewport, I have this working with modifiers. However, I'm trying to do this infinitely which I have tried by calling the tween function again but visually there's a slight pause when it restarts. How can I fix this? An approach I thought of was to make my translate values longer and adjust duration but this wouldn't frequently touch the edge of the viewports.

Any references or examples you can point me to?

@ZachSaucier Any help with the jump issue above? highly appreciate your input here.

I tried getting the last section's height and adding to the whole Scrolltrigger, however If you notice when scrolling to the last section it quickly jumps... Do you know why this jump happens? Tried your suggestion here: https://codepen.io/nullhoooook/pen/abZOdJy?editors=0010