Layered Pinned Sections with Sticky Header Preview at the Bottom

[alonK]

Hello everyone,

 

I'm working on a project where I'd like to create a layered pinning effect for multiple sections.

The goal is to offer a unique scroll experience by showing a "preview" of the next section's header as a sticky footer at the bottom of the current section.

 

As users scroll down, this sticky footer should provide a glimpse of what's coming next.

The challenge I'm facing is with the transition from one section to another. When the user reaches the bottom of the current section's content, the sticky footer (preview header of the next section) should unstick, and the next section should then become the primary focus. This next section would then also have its own sticky footer showing a preview of the subsequent section, and so on.

 

I have found solutions for pinned section from bottom like here -  but not sure how to face the next section preview.

 

Does anyone have experience creating this kind of layered, pinned sections with GSAP and ScrollTrigger?

Any guidance or code examples would be extremely appreciated. Thank you in advance for your help!

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

[mvaneijgen]

Hi @alonK we love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! Posting one of our own demo's doesn't really do anything, you'll only learn when you get your hands dirty. 

 

The thing that trips people up when starting out is that is seems really complicated, but all ScrollTrigger is doing is animating something on scroll. So yo frist need to have an animation before you can do anything with ScrollTrigger.

 

Here is an example of someone who asked something similar (can't find the post at the moment) 

 

The images come in from the bottom, but instead of them coming from 100% of the height they come from 95, which will be a slight overlap with the previous one. This could of course be adjusted to taste 

See the Pen bGOaegV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

And then here the same animation, but hooked up to ScrollTrigger.

See the Pen yLGpJgM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening!