Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DK7

ScrollSmoother element position fixed problem

Go to solution Solved by PointC,

Recommended Posts

Hi,

 

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

 

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? :D 

 

Thanks for your advice :)

 

 

 

 

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

Link to comment
Share on other sites

  • Solution

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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? :D 

 

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

Thank you very much ! :D 

 

 

  • Like 3
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.
×