Jump to content
Search Community

ScrollSmoother .scrollTo() + .offset() methods

BenjaminO test
Moderator Tag

Recommended Posts

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

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

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

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

  • 3 weeks later...
  • 4 weeks later...

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:

  1. It'd require extra checks internally which cost CPU cycles and I'm not sure it's really worth it since...
  2. 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

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

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? 

  • Thanks 1
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...