Position sticky using gsap

[EVA CORPORATION]

Good afternoon!
I wanted to make the block with the table-rates-head class in the "table" scroll within the parent with the table-rates-options class.
But I managed to make the scroll work on the machine, I can't figure out how to make a trigger for the block with scrolling down and up, and not how it turned out on the machine scrolls to the end.

It turns out that I need to make position sticky using gsap, I can't do it purely with styles, due to the fact that there must be overflow hidden...

See the Pen NWewrad by eglit_m (@eglit_m) on CodePen

[akapowl]

 

Hello there.

Sounds to me like you want to just pin it with pinSpacing set to false (?).

 

You'll find more information on those properties in the docs:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

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

[mvaneijgen]

I came to the same conclusion, what was trowing me off is that a lot of divs don't have a proper closing tag. Hope it helps and happy tweening! 

 

See the Pen wvRPzey?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

[akapowl]

 

Nice catch, Mitchel - I didn't even notice since I didn't even check - the pinning just instantly worked for me nonetheless.

 

Please in future make sure that besides the part you are having problems with on the GSAP related side of things, your demos are working / without mistakes @EVA CORPORATION. It can become quite tedious and time consuming trying to help with one thing while there are mistakes on a whole different level that go unnoticed. Fortunatelly this wasn't the case here - well, at least for me it wasn't.
 

Also worth mentioning, that ease is not a property of ScrollTrigger - it is a property of tweens for the most part and that's where it would belong on; setting an ease on the scrollTrigger object is not where it belongs.

 

[EVA CORPORATION]

1 hour ago, mvaneijgen said:

I came to the same conclusion, what was trowing me off is that a lot of divs don't have a proper closing tag. Hope it helps and happy tweening! 

 

I'm sorry, it can be seen when I moved and removed a lot of text, I accidentally deleted the closing tag >__<, and then also duplicated with this error T___T

[EVA CORPORATION]

I corrected the layout and added a version of the code, but it turned out that the scrolling of the block does not go to the end.
It turns out that not all the blocks are open at once, they open one by one, and when I scroll and open blocks 2-3, the opening of the block slows down and does not scroll further...

[EVA CORPORATION]

As I understand it, the end does not count further, it turns out ...
You can make the end up to btn-count-rates

[mvaneijgen]

Try calling ScrollTrigger.refresh(); when you've opened or closed the the blocks. Doing this will recalculate the positions. 
 

[EVA CORPORATION]

37 minutes ago, mvaneijgen said:

Try calling ScrollTrigger.refresh(); when you've opened or closed the the blocks. Doing this will recalculate the positions. 
 

Oooo 🤩... It works, but only when closing all the blocks except the initial one, for some reason I did not recalculate.😅