Issue with ScrollSmoother & sticky columns

[NoMore321]

I've recreated my issue with a simplified CodePen.

 

Without ScrollSmoother active, the middle (non-sticky) column scrolls perfectly as you'd expect while the other two columns remain in place.

 

Once ScrollSmoother is active, the height of the section is borked and no sticky scrolling occurs. What can I do to enjoy ScrollSmoother whilst still using sticky here and there as needed? (I've commented out the ScrollSmoother code in the CodePen - it's there to play with)

 

Thanks in advance!

See the Pen 3e45cd0ec5f8842a9d99db2c88b5ced2 by brynb (@brynb) on CodePen

[akapowl]

Hello @BrynWithin - welcome to the GSAP forums!

 

Assuming, position: sticky is a sort of hybrid between relative and fixed, I think with position: sticky elements it might be the same as with position: fixed elements - and for fixed elements the following is the case:

 

You can not have them inside your smooth-scrolling container, because due to the transforms applied to that container, the context for the position fixed changes, and they will be fixed to that container being translated instead of fixed to the viewport and thus move with the flow.

 

So if my assumption was true, since you can not easily just take those columns out of the container, I would just pin them via ScrollTrigger instead - as you are loading it anyway.

 

I took the freedom to copy paste your example into a new codepen because I couldn't fork yours (as it is private) - hope you don't mind. Does this work for you?

 

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

 

 

[NoMore321]

@akapowl Brilliant - I can't thank you enough! I'm still adjusting to much of the GSAP life so forgive my not thinking to pin instead of sticky.