Jump to content
GreenSock

Sukru

Gsap Modalbox Position Page Center

Recommended Posts

Hello, I'm using modal or popup in my project, but when I scroll, the modal and popup are not right there on the page.

Can you help me?

 

thumb_show.php?i=zc77hp9tuthumb_show.php?i=488tt4r5z

See the Pen Poemram by sukruemanet (@sukruemanet) on CodePen

Link to comment
Share on other sites

That's a CSS issue - when you use position: fixed on an element that's inside an element that has a transform applied (as your smooth-content does), it uses that container as the reference rather than the viewport (for positioning/sizing). That's a browser/spec thing, totally unrelated to GSAP/ScrollSmoother.

 

So when you're doing height: 100%, for example, it is using the full height of the content, not the viewport. 

 

That's why the ScrollSmoother docs say you should put any position: fixed content OUTSIDE the wrapper. Like this: 

See the Pen mdLmNNG by GreenSock (@GreenSock) on CodePen

 

If you really need it inside that content, you could position it differently and use something like getBoundingClientRect() to calculate where to put it offset-wise, but I think it's simpler to adjust your markup. 

 

Does that clear things up? 

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