GSAP ScrollTrigger w/ inner div (Scroller element) scrolls past end function value

[Something Strange]

Hi all,

 

I'm working on a project that has a locked (fixed) modal overlay that will have some scrolling fun of its own. Since this is an overlay to the site, I'm not using the typical document.body scroller by default.

 

For simplicity, my demo here is just a fixed inner div with it's own overflow-y content to scroll and the html, body are set to overflow hidden.

 

I'm setting the heights dynamically (as content in this div will be unknown) with a window resize event to calculate the new "y" and "end" value for this ScrollTrigger.

 

But, my "end" function value (and/or "y") is not correct, as I can scroll way past the last red box... almost twice as far as the height of the content...hmm?

 

I'm a little confused on what I should be calculating for the "y" and or "end" values here.

 

Any help is appreciated,  thank you for your time!

See the Pen mdaEyRm by something-strange (@something-strange) on CodePen

[mvaneijgen]

Hi @Something Strange

 

I've just disabled your y tween and everything  is still scrolling, so what is happening in your example is that everything is scrolling and you are moving all the elements up, so you're kinda scrolling twice! You're also animating you trigger element which makes it so nothing will line up any more 

 

See the Pen qBLNOVv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I've moved some of your elements around, created a new .inner element which gets animated. I've also set pin: true, so now the elements are not scrolling, but only gets moved with the y property and the scroll space is getting created by ScrollTrigger. It looks to line up now there is only some padding coming from somewhere, which I can't figure out. Hope it helps and happy tweening! 

 

See the Pen poqbJOb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[Something Strange]

Hi @mvaneijgen!

 

Thank you so much for this new demo and great explanation! That would explain why I was scrolling "twice as far" haha.

 

And thank you for this new demo with the color backgrounds, I totally see what's happening now.

 

Cool!!

[Something Strange]

Hi again, @mvaneijgen 

 

I forked your demo above and cleared the margins to see if that was an issue for that padding deal at the bottom. That wasn't the issue though, hah.

 

But this is weird - if you scroller really really slow as you near the bottom, it almost lines up at the end, but if you scroll really fast to the bottom, you end up with a much larger gap.

 

I'll play around with this, but if you have any other ideas on this, please let me know, hah.

 

Thanks again!

 

See the Pen eYbzpbL by something-strange (@something-strange) on CodePen

[Something Strange]

Hi @mvaneijgen,

 

Sorry to bug you again, ha, but I noticed two other things that may lead to this padding issue...

1. As I scroll down the scrollbar thumb actually increases in height as you near the bottom, and when you scroll to the top it decreases, meaning the height of something appears to be changing on scroll?
2. And if you scroll to the bottom really fast to leave that larger gap, pause for it to stop animating, then scroll back up a little bit and as soon as the red block hits the bottom of the viewport, it re-animates / scrubs again... not sure if my words make sense here, hah.

 

Anyhow, I'll keep debugging this. Thanks!

[mvaneijgen]

I've removed a lot of CSS and tried to bring it back to the bare minimum, right now I have this. I couldn't tell you what the culprit is, but maybe it helps you build it out further. 

 

See the Pen poqbyWj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Something Strange]

Hi @mvaneijgen,

 

Thank you for this extra demo! Pushed me in the direction and so I forked this to make some adjustments...

 

This now allows html, body {overflow: hidden} and I added the invalidateOnRefresh: true to the ScrollTrigger so on our window resize event, our calculations update.

 

Resize the height of the demo panel and you'll see everything resets and scrolls smoothly!

 

See the Pen RwERKoX by something-strange (@something-strange) on CodePen