Jump to content
GreenSock

thei

ScrollSmoother: Unable to scroll to bottom of page when using pin

Recommended Posts

When using ScrollSmoother, I am unable to scroll to the bottom of the page if I pin something inside something else that was also pinned. ScrollSmoother appears to think that the page has "finished" earlier than it really has.

 

Calling ScrollTrigger.refresh() does *not* fix the problem.

 

Also, why does my nested pinned content not pin, and instead scrolls down twice as fast?

 

See for a basic demo.

See the Pen KKRQYLq by nedmartin (@nedmartin) on CodePen

Link to comment
Share on other sites

I think this is due to the lack of physical space to scroll into - I added a spacer and it allows you to scroll to the bottom.

See the Pen KKRoKwr?editors=1010 by GreenSock (@GreenSock) on CodePen



@akapowl is the resident ScrollTrigger pro so I'm sure he'll have a better explanation! 

Link to comment
Share on other sites

10 minutes ago, Cassie said:

I think this is due to the lack of physical space to scroll into - I added a spacer and it allows you to scroll to the bottom.
 

 


@akapowl is the resident ScrollTrigger pro so I'm sure he'll have a better explanation!

 

I believe that's just some kind of coincidence - my basic example happens to be broken by 100vh for whatever reason, so adding the spacer looks like it's made it work. Unfortunately it doesn't fix the issue on my site.

 

In the actual site I'm building, the amount "broken" (i.e. the amount it can't scroll) doesn't seem to be any multiple of 100vh's (I tried adding a 100vh, 300vh and 400vh spacer just quickly to see it it works - 300vh isn't quite enough, 400vh is too much...)

 

I suspect it's probably the total amount of pinned space amongst all pinned elements if I had to hazard a guess - but as far as I can tell, ScrollSmoother is very broken. I'm not aware of any way I can calculate the total amount of pinned space in order to add it to a spacer element - but surely that's a task that GSAP should be doing for me anyway?

 

I'm really hoping someone can come up with a simple solution for this or point out the silly thing I've done wrong, as the project I used this in is already overdue and I made the unfortunate mistake of assuming ScrollSmoother was production-ready and the work required to remove it is proving to be a lot more than I thought - removing ScrollSmoother does fix this problem, but it makes the animations very jerky and largely ruins the "smooth premium" feel that was important for this project.

Link to comment
Share on other sites

Sorry you've stumbled on an issue. GSAP should certainly be working this out for you, (and will figure it out for you once we work out the problem.)

Tagging in @GreenSock - He'll be able to help.

Jack - Here's an even more minimal demo - you can comment in/out the ScrollSmoother code to show the issue.

See the Pen BaxYXvo?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

 

I've been tinkering with it a bit, but I don't want to judge wether this is a bug or not.

 

One thing I found is that if you do not set box-sizing: border-box inline (as in 1.: deactivate it via dev-tools or 2.: alternatively overwrite/clear it in a refresh callback and refresh the smoother instance) on the pin-spacer of the first ScrollTrigger it appears to work as intended by @thei.

 

Maybe this can serve as a workaround for now and if this atually is a bug, help find the root of the problem.

 

Works for me in both, the OPs codepen and @Cassie simplified demo.

See the Pen rNvJXbd by akapowl (@akapowl) on CodePen

 

See the Pen xxjWxRV by akapowl (@akapowl) on CodePen

 

Link to comment
Share on other sites

45 minutes ago, akapowl said:

 

I've been tinkering with it a bit, but I don't want to judge wether this is a bug or not.

 

One thing I found is that if you do not set box-sizing: border-box inline (as in 1.: deactivate it via dev-tools or 2.: alternatively overwrite/clear it in a refresh callback and refresh the smoother instance) on the pin-spacer of the first ScrollTrigger it appears to work as intended by @thei.

 

Maybe this can serve as a workaround for now and if this atually is a bug, help find the root of the problem.

 

Works for me in both, the OPs codepen and @Cassie simplified demo.
 

 

 

 

 

 

It's interesting that that seems to works in the simplified examples, but sadly it doesn't work for me on my more complex actual site (which contains several pins and many animations, etc) 😢

 

I tried setting all pin-spacers to box-sizing: content-box|border-box|unset !important, and that also did not work (and broke some of the pinned items quite a bit).

Unfortunately I don't have the time or knowledge to dig through and try to work out if some pin-spacers need to have box-sizing changed and others don't, and I don't have the time to create a more complex sandbox with more pinned elements in it that more closely replicates my actual site just so others can debug their code. If it's something complex to do with something peculiar I'm doing with my site then fair enough (it has lots of grid- and flex-based layouts and is fairly complicated), but it seems to me that even the very basic use of ScrollSmoother and pinning is broken so it's not just me? 😭

Link to comment
Share on other sites

Update: I added another pin to my codepen, which also does not work. Why does the pinned text scroll down twice as fast, instead of remaining pinned? I've been using GSAP for years, way before all the fancy v3 stuff, and never had all these problems with even the most basic bits like trying to pin some text... I don't know what's going on! 😭

 

See the Pen KKRQYLq by nedmartin (@nedmartin) on CodePen

Link to comment
Share on other sites

Here's a fork with the latest beta files - better?

See the Pen dyeeRqN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Like I said in the other thread, we sure appreciate folks like you who have been long-time users and trust GreenSock tools to "just work". I apologize for the negative experience - I'm sure it seems like ScrollTrigger and pinning are simple, but they definitely are not :) - try building something similar with all the bells & whistles and you'll stumble across all kinds of "gotchas". The modern toolset (with ScrollTrigger, Flip, Morphing, motion paths, matchMedia(), etc.) is WAAAAY more complex than the old days of just TweenLite/TweenMax. But hey, that's a good thing overall. It's just tough to manage expectations sometimes.

 

We'll work hard to earn that trust back, @thei, and my deep-dive into getting nested pinning functional for you was a step I took in that direction. 

 

Let me know if that beta file is working well for you. 👍

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