Jump to content
GreenSock

jens./

ScrollSmoother + ScrollTrigger resize broken?

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

 

I ran into an issue where my ScrollTrigger start/stop positions are incorrect after window resize. This only occurs in combination with ScrollSmoother. I checked some codepen demos and it also happens there. To reproduce open the pen, scroll down and then resize. It seems to work if you resize at the beginning of the page, when scrolled down the ScrollTrigger calculations seem to be broken after resizing.

Can someone confirm? Is there a workaround? I tried ScrollTrigger.refresh on resize with no luck.

 

Thank you

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

Link to comment
Share on other sites

Welcome to the forums @jens./

 

Thanks for bringing this up. Please standby while we investigate.

 

  • Like 1
Link to comment
Share on other sites

HI

I found the same problem using a pinned canvas with image sequence as first section of page.

Using ScrollTrigger and ScrollSmoother.

 

After resizing, the .pin-spacer height stay the same,

but it's not pinning anymore and animation seems out of view

 

It's a confidential work but I can set up a codepen if needed...?

 

Thanks for investigating !

Link to comment
Share on other sites

Hi @Lambdaka

 

If you can setup a minimal demo, that would be great just so we can verify that your issue is the same as the one posted above and not something else we need to look at.

 

Link to comment
Share on other sites

Pretty sure it's the same issue. The steps to reproduce are identical, when you scroll up and resize everything is in the right place again. Seems like ScrollTrigger is not considering SmoothScrollers scroll position on resize.

Link to comment
Share on other sites

When I try to resize and scrollup the original animation is not working anymore..?

Can you make the image sequence works after resizing?

 

The problem occurs only when resizing touch the canvas.. so on embeded codepen we have to resize to small width..

Link to comment
Share on other sites

Hi jens,

 

Your issue should be fixed now if you clear the cache in your demo and try again. 

  • Thanks 1
Link to comment
Share on other sites

Woooaw that was fast..!

 

So I need to download ScrollSmoother again and that's it ?

 

Thanks !!

S.

  • Like 1
Link to comment
Share on other sites

Oh, I don't know your issue right now Lambaka as it only seems to break around a certain width. Still looking at it.

 

 

Link to comment
Share on other sites

@OSUblake Yeaa really fast, thank you for looking into it.

Link to comment
Share on other sites

7 minutes ago, OSUblake said:

Oh, I don't know your issue right now Lambaka as it only seems to break around a certain width. Still looking at it.

 

 

It does fix Lambakas codepen.

Link to comment
Share on other sites

Yes it fixed but not totally..

 

@OSUblake  you right at certain width it still breaks lay out...but animation is working..!

Pretty close I guess 😀

 

 

Link to comment
Share on other sites

Hi @Lambdaka

 

Can you verify that it's resolved here? I removed some code just to focus on that one ScrollTrigger. 

 

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

 

Link to comment
Share on other sites

Seems perfect !

 

it's also working on my codepen with full code above.

Thanks a lot ! 😎

 

Is it updated on greensock.com ?

Do I just have to download ScrollSmoother and ScrollTrigger from my dashboard again ?

 

Link to comment
Share on other sites

Yep, you can download the bonus zip from greensock.com right now and it will have that fix in place. Sorry about the glitch!

Link to comment
Share on other sites

Thank you for the fix !! 😀

 

I noticed that the animation on mobile is not smooth if I don't use SmoothTouch : 0.1

but this occurs before and after the fix.

I guess it's something with the sequence animation code.

But it's working very well with SmoothTouch so it's not a problem

 

Thanks

S.

Link to comment
Share on other sites

  • 4 weeks later...

Hi! I'm having this same problem on a website I'm building but I noticed in the CodePens the fix comes on a 3.10.5 version of ScrollSmoother but the latest I get is 3.10.4. I'm getting it from NPM, is there a way to get the new version from there?

Link to comment
Share on other sites

@BC Development what problem are you trying to fix? The one in this thread was already fixed in 3.10.4, so I'm a bit confused. Got a minimal demo

Link to comment
Share on other sites

Hm, it looks like it fixes the problem that I posted some time ago. The codepens are working now. Before they had the same problem that I had with my current develoment.

 

  • Like 1
Link to comment
Share on other sites

@GreenSock oh! I implemented ScrollSmoother recently on a site, I don't have a CodePen demo and since the problem I'm seeing is the same described above, I thought that maybe I didn't have the fix.

Basically if I resize the window with the page scrolled down, it glitches and doesn't let me go up after that. I'm certain that is ScrollSmoother because if I remove it, it doesn't happen.

 

I have many Scrolltrigger transitions on that homepage so I could guess something is interfering there, but I would have to test. Thanks for the quick response!

Link to comment
Share on other sites

Yup! nevermind! I have a ScrollTrigger implementation that is creating some sort of conflict with ScrollSmoother on resize. I'll check my code!

  • Like 1
Link to comment
Share on other sites

@GreenSock I'm back 🙃 but now I was able to pinpoint the problem to a scrolltrigger that is snapping to different sections and I created a CodePen that reproduces the problem

 

See the Pen MWQaMQx by diegoatmaniak (@diegoatmaniak) on CodePen

 

 

Link to comment
Share on other sites

Thanks for the demo! We'll look into that.

 

  • Like 1
Link to comment
Share on other sites

Okay, @BC Development, I think I tracked down the issue (Safari is firing events intermittently in a strange order...plus it misreports scroll values in various scenarios...all browser bugs) and applied a workaround in the next release which you can preview (on CodePen/CodeSandbox) here: 

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

 

(You may need to clear your cache)

 

Better? 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×