jens./ Posted April 13, 2022 Share Posted April 13, 2022 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 More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 Welcome to the forums @jens./ Thanks for bringing this up. Please standby while we investigate. 1 Link to comment Share on other sites More sharing options...
Lambdaka Posted April 13, 2022 Share Posted April 13, 2022 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 More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 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 More sharing options...
Lambdaka Posted April 13, 2022 Share Posted April 13, 2022 And here is the codepen Sorry the css is not really minimal... See the Pen wvpEbJE by lambdaka (@lambdaka) on CodePen Link to comment Share on other sites More sharing options...
jens./ Posted April 13, 2022 Author Share Posted April 13, 2022 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 More sharing options...
Lambdaka Posted April 13, 2022 Share Posted April 13, 2022 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 More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 Hi jens, Your issue should be fixed now if you clear the cache in your demo and try again. 1 Link to comment Share on other sites More sharing options...
Lambdaka Posted April 13, 2022 Share Posted April 13, 2022 Woooaw that was fast..! So I need to download ScrollSmoother again and that's it ? Thanks !! S. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 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 More sharing options...
jens./ Posted April 13, 2022 Author Share Posted April 13, 2022 @OSUblake Yeaa really fast, thank you for looking into it. Link to comment Share on other sites More sharing options...
jens./ Posted April 13, 2022 Author Share Posted April 13, 2022 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 More sharing options...
Lambdaka Posted April 13, 2022 Share Posted April 13, 2022 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 More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 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 More sharing options...
Lambdaka Posted April 13, 2022 Share Posted April 13, 2022 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 More sharing options...
GreenSock Posted April 14, 2022 Share Posted April 14, 2022 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 More sharing options...
Lambdaka Posted April 14, 2022 Share Posted April 14, 2022 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 More sharing options...
Maniak Development Posted May 6, 2022 Share Posted May 6, 2022 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 More sharing options...
GreenSock Posted May 6, 2022 Share Posted May 6, 2022 @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 More sharing options...
Sascha Fincher Posted May 6, 2022 Share Posted May 6, 2022 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. 1 Link to comment Share on other sites More sharing options...
Maniak Development Posted May 6, 2022 Share Posted May 6, 2022 @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 More sharing options...
Maniak Development Posted May 6, 2022 Share Posted May 6, 2022 Yup! nevermind! I have a ScrollTrigger implementation that is creating some sort of conflict with ScrollSmoother on resize. I'll check my code! 1 Link to comment Share on other sites More sharing options...
Maniak Development Posted May 6, 2022 Share Posted May 6, 2022 @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 More sharing options...
OSUblake Posted May 6, 2022 Share Posted May 6, 2022 Thanks for the demo! We'll look into that. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 12, 2022 Share Posted May 12, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now