greenwich Posted April 23 Share Posted April 23 I have my page where every section needs to be 100vh height and have a `scroll-snap` effect, but the footer needs to be `fixed overlapping` from the bottom. I added minimal reproduction, but when you want to stop scrolling the footer, the page jumps on top; sometimes, it just stops on the footer and only scrolls on the footer. Something magical is happening here, please help me) Also, I tried to move the snap effect to GSAP (based on this codepen — See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen ), but it started lagging very hard (maybe because of the Three.js model in the background), and on iPhone, scrollAnimation started to be limited to only 60fps (on Pro versions, where we have ProMotion 120Hz, it is very ragged). Will be very grateful for some help with this ☺️ See the Pen QWPzGJj by greenwich (@greenwich) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted April 24 Share Posted April 24 Hi @greenwich and welcome to the GSAP Forums! Sorry for the late answer 🙏 Maybe something like this: See the Pen WNWPKBp by GreenSock (@GreenSock) on CodePen Is basically a fork of the demo you posted but it uses ScrollTo plugin instead of CSS' scroll-snap and also takes into account the height of the footer. In this case the footer has a fixed height, but if your footer has a dynamic height, you can easily use something like this in the end point calculation: const footer = document.querySelector("footer"); ScrollTrigger.create({ start: 0, end: () => ScrollTrigger.maxScroll(window) - footer.clientHeight, snap: 1 / (panels.length - 1) }) Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now