DaphneX Posted March 13 Share Posted March 13 Hi all, I'm new here and used one of the demos to create snap panels. The problem is my page also contains a footer which jumps back up when you reach the end of the page. I forked the demo to include a footer in order to demonstrate the issue and get some insights on how to fix it. I tried various css of gsap changes with no success. Really sorry if this has been already asked, I searched the forum but couldn't find something relevant. See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen And here's my fork with the added footer where you can see the bouncing back when you reach the end of the page. See the Pen KKYMbWr by Daphne-Christoforidou (@Daphne-Christoforidou) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted March 13 Share Posted March 13 Hi @DaphneX and welcome to the GSAP Forums! What's causing this is the snap functionality baked into that particular demo, when you add a footer the max height of the scroller is no longer tied to the amount of panels so you have to consider that into the math of the snap logic. This seems to work the way you intend: ScrollTrigger.create({ snap: { snapTo: (progress, self) => { let panelStarts = tops.map(st => st.start), snapScroll = gsap.utils.snap(panelStarts, self.scroll()); // If the current scroll is past the last panel don't snap if (self.scroll() > panelStarts[panels.length - 1]) { return false; } return gsap.utils.normalize(0, ScrollTrigger.maxScroll(window), snapScroll); }, duration: 0.5 } }); Here is a fork of your demo: See the Pen zYXBVGW by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
DaphneX Posted March 13 Author Share Posted March 13 Thank you Rodrigo ! It works indeed ! 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