BenjaminO Posted August 16, 2022 Share Posted August 16, 2022 Hello, I am using the ScrollSmoother plugin and I created a button to smoothly scroll down to a specific element using : button.addEventListener('click', () => { gsap.to(Smooth, { scrollTop: Smooth.offset('#formsection', 'top top'), duration: 3, ease: 'power4.inOut' }) }) The problem is that the #formsection can be taller or smaller than 100vh. when #formsection is taller than the height of the screen (100vh) the code above is working as expected but when it is smaller, there is an overscroll. Indeed the section is placed at the bottom of the page. I tried to set up 'auto auto' as a second argument to the .offset() method but I think it is set to 'center center' by default. I would expect a behavior that match with the regular .scrollTo() method which is working fine without overscroll. button.addEventListener('click', () => { Smooth.scrollTo('#formsection', true) }) Link to comment Share on other sites More sharing options...
GSAP Helper Posted August 16, 2022 Share Posted August 16, 2022 Hm, I'm struggling to follow this without a minimal demo. Are you saying that you think the .offset() method is returning an incorrect value? Also, is there a reason you're not using the .scrollTo() method (which I think you said was working fine)? Is your goal to customize the duration and ease? Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Once we see an isolated demo, we'll do our best to jump in and help. Link to comment Share on other sites More sharing options...
BenjaminO Posted August 17, 2022 Author Share Posted August 17, 2022 Hello @GSAP Helper and thank you for the starter template. I created this See the Pen YzaRbaz by benjamOD2 (@benjamOD2) on CodePen where you'll be able to see the difference between the two methods. When the #third section is smaller than 100vh (above 1024px in my demo), you'll see a blank space below the section when using the offset() method to scroll down. Below 1024px, it is working as expected. Indeed I'd like to ease the scroll so I would prefer using the offset() method. Link to comment Share on other sites More sharing options...
BenjaminO Posted August 17, 2022 Author Share Posted August 17, 2022 I added the ScrollTo plugin in the demo and it is working as I would like the offset method to work. However, I don't want to incorporate this plugin only for few scroll as it add weight to my final bundle. Also I remarked that the Scrollto() method with smooth parameter set to true wasn't working on mobile browsers ! It jumps directly to target (see codepen above 👆) cc @GreenSock Link to comment Share on other sites More sharing options...
BenjaminO Posted September 4, 2022 Author Share Posted September 4, 2022 Any plan to update this ? 🙂 @GreenSock, @Cassie, @GSAP Helper Link to comment Share on other sites More sharing options...
GreenSock Posted September 27, 2022 Share Posted September 27, 2022 Very sorry about the late response - I have no idea why I wasn't notified about your post(s). 🤷♂️ This is the first I'm seeing them. From what I can tell, with the latest 3.11.2 update things are working exactly as they should. The offset one is a bit odd because technically with the way ScrollSmoother works (using transforms) does allow the offset to go past the end of the page. The offset value is indeed getting reported correctly. You could argue that ScrollSmoother should disallow scrollTop going beyond the maximum scroll position but I'm on the fence about that because: It'd require extra checks internally which cost CPU cycles and I'm not sure it's really worth it since... It's quite easy to fix your value like: // old scrollTop: Smooth.offset('#third', 'top top'), // new scrollTop: Math.min(ScrollTrigger.maxScroll(window), Smooth.offset('#third', 'top top')), Here's a fork with that in place: See the Pen KKRZrQw?editors=0010 by GreenSock (@GreenSock) on CodePen (you may need to clear your cache to make sure you're getting the 3.11.2 file) Link to comment Share on other sites More sharing options...
BenjaminO Posted September 27, 2022 Author Share Posted September 27, 2022 Hello @GreenSock ! 🙂 I think you're totally right about the approach of the offset method 😁 you're workaround is working like a charm ! thank you for that. I am still encountering this jump issue with ScrollSmoother.scrollTo() on mobile after clearing cache (on IPhone). Please see a video of the codepen in Safari and Firefox mobile : https://mega.nz/folder/6tx0jAoK#c4QVKRSAeiCmHw6p83ouhw Link to comment Share on other sites More sharing options...
GreenSock Posted October 2, 2022 Share Posted October 2, 2022 I'm not able to reproduce that problem at all with the latest beta files, @BenjaminO. Can you? I tried on my iPad and my iPhone. Seems to work correctly. Here's a fork with those files in place (you may need to clear your cache): See the Pen poVVwGm by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
BenjaminO Posted October 3, 2022 Author Share Posted October 3, 2022 Hello @GreenSock, I still have the same issue (jump) with an IPhone 13. I also tried on IPhone SE (with both IOS 16.0.2) and with this one, the ScrollTo() method is not even triggered (nothing is happening). I cleared the cache (I even reset the IPhone SE). On which mobile did you make your test ? Link to comment Share on other sites More sharing options...
GreenSock Posted October 4, 2022 Share Posted October 4, 2022 Sorry about that @BenjaminO. I did a bunch of work on ScrollTrigger/Smoother since I posted that and one of the improvements ended up breaking that .scrollTo() functionality, but I believe that's all patched up now. Please verify (you may need to clear your cache). Link to comment Share on other sites More sharing options...
GreenSock Posted October 4, 2022 Share Posted October 4, 2022 Should be resolved in 3.11.3 (just launched) 🥳 Link to comment Share on other sites More sharing options...
BenjaminO Posted October 11, 2022 Author Share Posted October 11, 2022 Hello @GreenSock ! Sorry for the late response. I've been testing scrollTo() with an IPhone 13 (IOS 16.0.2) but I am still experiencing the jump issue in Safari as well as in Firefox 😅 Link to comment Share on other sites More sharing options...
GreenSock Posted October 11, 2022 Share Posted October 11, 2022 I can't seem to reproduce that, @BenjaminO - keep in mind that by default there is NO smoothing on touch devices. When you smoother.scrollTo(...), and enable the "smooth" parameter, that simply applies whatever "smooth" that you have on your ScrollSmoother. For example, smooth: 2 would take 2 seconds to scroll there. But if you're on a mobile device it effectively sets smooth: 0, thus it would be perfectly normal to see it "jump" to the proper position in that case. Does that clear things up? 1 Link to comment Share on other sites More sharing options...
BenjaminO Posted October 13, 2022 Author Share Posted October 13, 2022 It makes total sense now ! thank you @GreenSock !! 2 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