Disable "scrub" when "x" and "end" values are changed

[xMrCrunchyx]

Hello,

 

I have successfully implemented a horizontal scroll using Gsap, which is functioning perfectly. However, I have encountered a minor issue. I have a "load more" button that, when clicked, adds multiple posts to the horizontal container. After adding these posts, I recalculate the Scrolltriggers "x" and "end" values, which also works as intended.

 

The problem arises when I click the "load more" button, as the Scrolltrigger has a scrub value of 0.6. This causes the scroll to take 0.6 seconds to return to the current location, which appears somewhat awkward. Is there a way to maintain the scrub value of 0.6 during scrolling, but temporarily disable it when clicking the "load more" button, and then re-enable it after the click?

 

I am hoping for a quick solution to avoid creating a minimal demo. If not, I will attempt to recreate the issue.

 

Thank you for your assistance.

[Rodrigo]

Hi,

 

Actually the scroll is being set in it's position immediately the scrub value makes the position update take 0.6 seconds. Maybe there could be a way using the onRefresh callback, getting the progress of the ScrollTrigger instance and setting the progress of the tween/timeline associated with the timeline to that specific value immediately to prevent the scrubbing effect.

 

If you keep struggling please create a minimal demo that clearly illustrates the issue.

 

Hopefully this helps.

Happy Tweening!

[xMrCrunchyx]

Your insights were invaluable, and they resolved the issue perfectly!

 

Solution:

let oldValue = tl.scrollTrigger.vars.end();

 

tl.scrollTrigger.refresh();

 

gsap.to(tl, { 
  progress: tl.scrollTrigger.progress * (tl.scrollTrigger.vars.end() / oldValue), 
  duration: 0 
});
 

With this adjustment, everything now functions as intended.

 

One more question. When I click the button, I notice a quick flash of the content (images, text) that seems out of place, followed by a rapid return to its proper position within the container. Currently, I'm hiding all of the content and then revealing it after a 40ms delay, but I feel this isn't the ideal solution. Do you happen to know of a better way to handle this content flash?

 

Thanks again for your assistance!

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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 dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

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. ✅

[xMrCrunchyx]

@GSAP Helper, I've identified the problem! It turns out that the ScrollTrigger plugin was reloading my CSS files on every resize. Since I dynamically load CSS in each component and it wasn't located in the head HTML tag, this caused the issue. 

 

I've since transferred all of the CSS stylesheet links to the head tag, and now everything works perfectly fine.

 

Thank you once again for all your assistance, @GSAP Helper and @Rodrigo!

[GreenSock]

6 hours ago, xMrCrunchyx said:

It turns out that the ScrollTrigger plugin was reloading my CSS files on every resize.

Hm, that doesn't sound right to me at all. ScrollTrigger doesn't cause anything to reload. Unless maybe if you had <style> tags inside a pinned element, only because ScrollTrigger has to create a wrapper <div> around it for pinning purposes (a pin-spacer), but even that is easy to work around by defining the pinSpacer yourself (so that ScrollTrigger doesn't need to create a new element for that). See the docs for pinSpacer details. 

 

I'm glad you discovered a solution, though. 👍