ScrollSmoother + ScrollTrigger resize broken?

[BC Development 8 Likes (Newbie)]

Thanks for the update @GreenSock, I don't notice a difference right now... cleared chache and all. And the problem is in all browsers for me. Just to be sure, because I just noticed I didn't go through the steps to replicate in my last post:

 

Scroll down either to section 1 or section 2 (after section 3 it doesn't glitch, I'm guessing because its where the ScrollTrigger with snap ends), then resize the codepen window (vertically or horizontally). On the next scroll, it will suddenly jump and when you scroll back, it doesn't let you go beyond the section you were in.

 

Here's a quick screen recording I just did in Chrome: 

https://drive.google.com/file/d/1OrJvjuE9ieHdgcWqqZZpRwVC83hv200Z/view?usp=sharing

 

Hope this helps!

[BC Development 8 Likes (Newbie)]

Hello! @GreenSock Just wanted to bump this to see if there's an update. Been trying for more than a month to add smooth scrolling to a website using other libraries or methods but the reality is that only ScrollSmoother has worked without breaking anything (except for the issue I've been sharing), so not really wanting to be annoying or impatient 😬

 

I appreciate any help!

[GreenSock 17,873 Likes (Superhero)]

Absolutely - not ignoring this and I appreciate the "bump"; we're hard at work on some enhancements and fixes (including this one). It's time-consuming, but rest assured I'll post back here when I've got something for you to look at. Thanks for your patience.

[GreenSock 17,873 Likes (Superhero)]

@BC Development alright, I believe I chased down the issue and got it resolved. Would you please try these beta versions (you may need to clear your cache)?:

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

Better? 

[BC Development 8 Likes (Newbie)]

@GreenSock hey! thanks for the help! I didn't see your reply until today, but yeah, it looks like that fixed it!

so, I would still need for an update to be pushed to the npm package to use it on a live project right?

[Cassie 4,843 Likes (Superhero)]

This is great news. And yes - I think so. Although maybe we could get you a tgz file if you needed? 

@GreenSock will know more about the status of the next update and possible ways forward for your live projects

 

[GreenSock 17,873 Likes (Superhero)]

I sent you a DM about accessing the unrestricted beta files, @BC Development 👍

[Lambdaka 3 Likes (Newbie)]

Hi

is it possible to get the updated beta files?

 

Cause I guess it will solve the problem with a video with no defined height that breaks the layout..!

 

Thanks a lot

 

[GreenSock 17,873 Likes (Superhero)]

@Lambdaka DM sent. ✅

[Lambdaka 3 Likes (Newbie)]

Thanks !

will try asap

 

[Gore Wang 2 Likes (Newbie)]

@GreenSock I got the same problem and fighting for all day, and I try the beta file it's worked!!😭

 Please sand me the beta files~  😭   😭   😭  

[GreenSock 17,873 Likes (Superhero)]

@Gore Wang sent. ✅

[monolith 0 Likes (Newbie)]

Hi @GreenSock could I also get the code to this beta? I'm currently on 3.10.4 and facing this issue.

 

If it doesn't fix my issue I'll try to make a codesandbox (gatsby).

It's weird because I have a minimal environnement where this bug isn't present, but on an actual project it's an issue.
Could be because of the component nesting or something of the sorts.

[GreenSock 17,873 Likes (Superhero)]

24 minutes ago, monolith said:

Hi @GreenSock could I also get the code to this beta? I'm currently on 3.10.4 and facing this issue.

Sent. ✅

[runejensencom 3 Likes (Newbie)]

I also got the same problem in Safari when resizing browser with ScrollSmoother enable.

 

Can I also have this beta too?

[GreenSock 17,873 Likes (Superhero)]

Absolutely, @runejensencom. Sent. 

 

We're prepping the next GSAP release with some very exciting new features which is why there has been a delay. Sorry about any inconvenience. 

[Dev Mude 0 Likes (Newbie)]

@GreenSock

 

I believe I'm having the same issue, try resizing the screen in this pen:

 

See the Pen poLOzbO by elliott-w (@elliott-w) on CodePen

 

Could I have access to beta files please?

[GreenSock 17,873 Likes (Superhero)]

Sure, @Dev Mude. DM sent. ✅

[Dev Mude 0 Likes (Newbie)]

35 minutes ago, GreenSock said:

Sure, @Dev Mude. DM sent. ✅

 

Hmm unfortunately it didn't fix things for me. You can try fork my pen and add the new versions to see for yourself.

 

Should I create a new thread for this issue?

[GreenSock 17,873 Likes (Superhero)]

Ah yes, sorry - it should be updated correctly now. Please try again. You may need to clear your cache. 

[Dev Mude 0 Likes (Newbie)]

Awesome, working now, thanks for that!

 

I had to wrap the following code (see my earlier codepen):

snapTriggers.forEach((trigger, i) => {
  snaps[i] = (trigger.start - self.start) / distance
})

In a setTimeout:

setTimeout(() => {
  snapTriggers.forEach((trigger, i) => {
    snaps[i] = (trigger.start - self.start) / distance
  })
}, 0)

Otherwise after screen resize, the text wouldn't align properly with the boxes. Not sure if this is a user error or a library error, but just letting you know.

 

Cheers

[GreenSock 17,873 Likes (Superhero)]

11 hours ago, Dev Mude said:

I had to wrap the following code (see my earlier codepen):

snapTriggers.forEach((trigger, i) => {
  snaps[i] = (trigger.start - self.start) / distance
})

In a setTimeout:

setTimeout(() => {
  snapTriggers.forEach((trigger, i) => {
    snaps[i] = (trigger.start - self.start) / distance
  })
}, 0)

Otherwise after screen resize, the text wouldn't align properly with the boxes. Not sure if this is a user error or a library error, but just letting you know.

 

Are you saying that you needed to do that in the NEW version? I think that's just an order-of-operation thing that can be solved by setting refreshPriority: 1 on the snapTriggers so that they are all calculated before your onRefresh() fires on the container which is technically higher on the page (thus would refresh earlier): 

See the Pen WNzgjRz?editors=0010 by GreenSock (@GreenSock) on CodePen