gsap Gsap Modalbox Position Page Center

[Sukru]

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?

 

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

[GreenSock]

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?