ScrollSmoother element position fixed problem

[DK7 8 Likes (Newbie)]

Hi,

 

as a GSAP beginner, every day is exciting and you always discover new behaviors that are so completely strange for me 

 

I've come across something that's driving me crazy.

 

The page scrolls horizontally, everything is great, but if I place elements like a logo and a burger menu in code before the animated container, they do just scroll out of the page?

 

What is happening here and how can I use css position:fixed; for elements like I can normally do?  

 

Thanks for your advice

 

 

 

 

See the Pen ZErBqoE by dkx (@dkx) on CodePen

[PointC 14,011 Likes (Superhero)]

You'll need to move those elements outside of your scroll wrapper.

 

See the Pen dfe28e138684e056e0dc54f7fc605d9c by PointC (@PointC) on CodePen

 

 

From the docs under Caveats:

position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.

 

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

 

Happy tweening.

 

[DK7 8 Likes (Newbie)]

Hi @PointC,

 

that's great! I thought I had to do it all with .to() etc. as well. You are my hero of the evening, thank you very much! Did I really only miss these two containers? How good is that?  

 

 <div id="smooth-wrapper">
  <div id="smooth-content">

Thank you very much !