ScrollTrigger Accordion with pin-spacer pushing content down

[OGM]

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

[Cassie]

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 😬

[OGM]

Thank you so much for the answer Cassie. Hopefully someone else can give me an advice how to fix it.

[Carl]

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. 

[OGM]

@Carl Thank you so much for your explanation. I will try both solution you suggested. 

[Kari98]

@OGM hi! did you find your solution?