OGM Posted August 20, 2022 Share Posted August 20, 2022 Hi, I'm new with GSAP and its forum and as part of my learning path I'm building this accordion element that use ScrollTrigger to close accordion items while scrolling. It's working perfect except that the pin-spacer create a white space after animation that push my footer down. I'd like to know if there is a way that I can get it off that white space and put my content all together finishing the scroll in the footer. Any help will be appreciate Thank you See the Pen XWEOVpb by ogm710811 (@ogm710811) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 20, 2022 Share Posted August 20, 2022 Hey there! This actually isn't space created by scrollTrigger, you're changing the height of the page, so there's a space at the bottom after you've 'closed' all the sections. This is a notoriously difficult situation. Maybe someone else will drop in with some advice for you - most of the advice I've seen for this so far has been 'do something else' though 😬 1 Link to comment Share on other sites More sharing options...
OGM Posted August 20, 2022 Author Share Posted August 20, 2022 Thank you so much for the answer Cassie. Hopefully someone else can give me an advice how to fix it. Link to comment Share on other sites More sharing options...
Carl Posted August 20, 2022 Share Posted August 20, 2022 yeah, like @Cassie mentioned you are changing the height of the page by changing the height of the accordion elements. When you use pin spacing GSAP is measuring the height of your wrapper and setting it as an inline style in your pin-spacer AND your wrapper. You can verify this doing an element inspection. You need this height to be locked so that the page has space to scroll through as your animations happen. So even though your animations are shrinking the height of the accordion items the wrapper is still staying "locked open" at full height. I would instead reach for a solution similar to GreenSock's layered pinning demo See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen I have a deconstruction video in my ScrollTrigger Express course here https://www.creativecodingclub.com/courses/take/scrolltrigger-express/texts/15813029-layered-pinning (student link) ... thanks for being a Creative Coding Club member. The basic idea would be to take the accordion elements out of the document flow and animate them using a transform, in this case y or yPercent. You may need to do some dynamic measuring and positional setting to get everything to be spaced properly. OR you could maybe change your document structure so that the footer (or whatever section comes next) is wrapped inside the last accordion element. This way it would be perfectly "attached" to the accordion. Hopefully having a solid understanding of the problem and some of these suggestions will help you better find a solution. BTW cool job on the demo! I dig the way it looks. 1 2 Link to comment Share on other sites More sharing options...
OGM Posted August 21, 2022 Author Share Posted August 21, 2022 @Carl Thank you so much for your explanation. I will try both solution you suggested. Link to comment Share on other sites More sharing options...
Kari98 Posted February 15, 2023 Share Posted February 15, 2023 @OGM hi! did you find your solution? 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