ScrollSmoother stops and ScrollTrigger misaligned in browser dev tools

[BastiBorr]

In short, I've employed ScrollSmoother and ScrollTrigger in my NextJS portfolio, but when I have Chrome/Edge devtools open and my app is refreshed (like when I've made a change in dev), the smooth scrolling stops. This wouldn't be the biggest deal if all that changed was the "lag" applied in scrolling, but other features that accompany SmoothScroller, like parallax and ScrollTrigger, begin to break down. Resizing the window given these conditions results in strange placement of any ScrollTriggers' markers. Moreover, I recently noticed that switching display orientation on mobile results in the same problem (just as is, not even in DevTools), if this helps diagnose my problem. It was one thing for it to affect my experience as a dev, but another now that I see the final product impacted, so any pointers would be greatly appreciated!

 

The CodeSandbox demo I have linked below is a barebones React Project with the same component "SmoothScrollOverlay.tsx" that I use in my actual project. It's set up like this in my actual project because as mentioned, I'm using NextJS, so I separate GSAP from the page for SSR purposes. Do let me know if I'm abusing any bad practices in doing such.

 

For context, I'm a student and new Software Engineer still building on my knowledge of React, let alone GSAP now, so if I've missed obvious things in the docs/forums, I apologize. It's been hard to combine my knowledge in both as I've struggled to find many resources that fit my goals, so if someone could push me in the right direction or link projects I could look at, I would greatly appreciate it! Thank you! 

 

https://codesandbox.io/p/sandbox/hjdqmr (code)

https://hjdqmr.csb.app/ (replicate bug here. If needed, I can link a video of the bug as well)

[Rodrigo]

Hi @BastiBorr and welcome to the GSAP Forums!

 

We'll have a look at this and keep you posted, please stand by.

 

[GreenSock]

Sorry about the confusion there, @BastiBorr! There was indeed a bug which should be fixed in the next release which you can preview here: 

https://assets.codepen.io/16327/ScrollSmoother.min.js

 

In the meantime, you can just deploy this fix that's a brute-force way of doing an additional refresh that manually records the current scroll position before that, sets it to 0, and then reverts it after the refresh: 

function smootherFix() {
  let smoother = ScrollSmoother.get(),
      forcingRefresh;
  ScrollTrigger.addEventListener("refresh", () => {
    if (!forcingRefresh) {
      forcingRefresh = true;
      let recordedScroll = smoother.scrollTop();
      smoother.scrollTop(0);
      ScrollTrigger.refresh();
      smoother.scrollTop(recordedScroll);
      forcingRefresh = false;
    }
  });
}
smootherFix();

Does that help? 

[BastiBorr]

Hi, no worries, thank you for getting back to me! Just implemented your fix and it works great, thank you! The visual bugs have gone away with scrolltriggers correctly placed after resizing now. This was the primary issue I had but I just wanted to ask, with this fix, should I expect the smooth scrolling to resume as well? The scrolltrigger issues I had in devtools and mobile are now gone after a refresh, but the smooth scroll still stays off on desktop. I don't care so much for this since it's such a specific case and very minimal but I figured I'd ask. Also, just so I know I'm staying up-to-date, how often are new releases for GSAP and when can I expect the next one to be available? Thank you so much again!

[Rodrigo]

Hi,

8 hours ago, BastiBorr said:

but the smooth scroll still stays off on desktop.

Can you elaborate a bit more on this? What exactly is off? Can you provide a minimal demo? Jack used this demo to test this

See the Pen afc21ce52125d4c80ff5b0c369fd93b5 by GreenSock (@GreenSock) on CodePen.

 

Here is the debug view (no iframes) to test directly on devices:

https://cdpn.io/pen/debug/OPMvORN/afc21ce52125d4c80ff5b0c369fd93b5

8 hours ago, BastiBorr said:

Also, just so I know I'm staying up-to-date, how often are new releases for GSAP and when can I expect the next one to be available?

There is nothing set in stone in terms of dates or amount of updates per year. As per the release of 3.13.1 I couldn't give you a hard date right now, but it shouldn't be too far down the road. The best way is to check the docs and see the latest version:

https://gsap.com/docs/v3/Installation?tab=cdn&module=esm&require=false

 

Also you can track our official GitHub repo:

https://github.com/greensock/GSAP

 

Happy Tweening!

[BastiBorr]

Sorry if I wasn't clear. Jack's demo you provided actually demonstrates it as well which works out. What I mean is there is no smooth-scrolling lag anymore after a refresh. So the bugs with ScrollTrigger after a refresh in devtools are fixed but I noticed the site loses any transformations done on the <div id="smooth-content"> which gives it the smooth scroll feel. Again, not the biggest deal to me but i figured I'd still point it out and ask. Thank you!

[GreenSock]

31 minutes ago, BastiBorr said:

What I mean is there is no smooth-scrolling lag anymore after a refresh.

Are you talking about on mobile sizes? By default, ScrollSmoother doesn't smooth scrolling on mobile touch devices. That's very intentional - typically people don't want scroll smoothing on touch devices because it feels weird (as if your finger isn't dragging things properly...like it's laggy). But you can enable it by adding a smoothTouch value, like: 

smoothTouch: 1

(in your ScrollSmoother config).  

 

Does that clear things up? 

[BastiBorr]

No i mean on desktop. It could somehow be isolated to my own device, but I'm experiencing this on my laptop while testing Jack's demo as well as my own. Let me know if a video demonstrating it would help.

[Rodrigo]

1 minute ago, BastiBorr said:

No i mean on desktop. It could somehow be isolated to my own device, but I'm experiencing this on my laptop while testing Jack's demo as well as my own. Let me know if a video demonstrating it would help.

Yeah it would be great, I just tested our demo with data-speed and data-lag effects and they keep working as expected after the using the smootherFix function created by Jack, so it would be great if you can pinpoint exactly what is not working as expected 👍

[BastiBorr]

https://drive.google.com/file/d/1r-6oH96oWQnsWL2oCHGDgi4V9PMP8GgJ/view?usp=sharing

Here's a link to my video demonstration. As you can see, the smooth scrolling disappears after a refresh and you can notice that the smooth-content div in the Elements tab is no longer being animated.

[GreenSock]

@BastiBorr can you please verify that you're absolutely positive that you added smoothTouch: 1 to your ScrollSmoother config? The behavior shown in your video is consistent with what I'd expect if you didn't set that value, as I explained above. 

[BastiBorr]

That's my mistake. I understand now that in devtools after the refresh, it reads the display as a mobile screen despite me browsing on my desktop and this is intended behavior. Sorry about that, thank you so much for the help up to this point!

[GreenSock]

No worries! Glad it all makes sense now 👍