Jump to content
Search Community

ScrollSmoother + ScrollTrigger resize broken?

jens./ test
Moderator Tag

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

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

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

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

@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

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.
×
×
  • Create New...