Covered Layered Sections - Keep overlap effect though make content area deeper than vertical height

[kpkreative]

Hi there, 

This is my first post, so apologies if this has already been raised.

 

The referenced Gsap 'Cover Layered Sections' functionality is close to what I am looking to achieve, though the only issue I have is that my content in each 'section' is deeper than the screen vertical height as shown in the codepen demo. The demo changes the state to fixed hence why it cuts off the content below the screen depth.

Is there a way to have the same overlap effect, though it allows to scroll to end of section, rather than hiding beyond the screen vertical height?

Thanks in advance.

Kev


 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen.

[akapowl]

Welcome to the forums @kpkreative.

 

What you could do is set the start of the ScrollTriggers to "bottom bottom" (when the bottom of each panel hits the bottom of the viewport) instead of "top top" - then things will scroll freely until then, so your taller sections should be good.

 

Obviously you will have to find a different solution for the snapping, if the part of a section that is more than 100vh is not a multiple of 100vh (if it is though, adjusting the given snapping in the demo is quite easy).

 

See the Pen e9015efd3d44b24f9cce5bef29dee1dd by akapowl (@akapowl) on CodePen.

[kpkreative]

Hi @akapowl,

 

Thank you so much for your response and the warm welcome.

 

The 'start:bottom bottom' has solved the issue with regards to showing the full div now, even without the extra css.

 

Is there a way to end the animation after the last panel, as it pulls the same animation into the footer too. 

 

Thanks in advance,
Kev

[akapowl]

10 minutes ago, kpkreative said:

Is there a way to end the animation after the last panel, as it pulls the same animation into the footer too. 

 

Sure, you can combine what I mentioned above with Cassie's solution from this thread

 

 

See the Pen 5368ccc78336bf9a89a9768723a9ab74 by akapowl (@akapowl) on CodePen.

[kpkreative]

@akapowl, this combination worked perfectly thank you.

 

gsap.registerPlugin(ScrollTrigger);

let panels = gsap.utils.toArray(".panel")

panels.forEach((panel, i) => {
  
  ScrollTrigger.create({
    trigger: panel,
    start: "bottom bottom", 
    pin: i === panels.length -1 ? false : true, 
    end:"bottom 100",
    pinSpacing: false 
  });
});

ScrollTrigger.create({
  snap: 1 / 5 // snap whole page to the closest section!
});

 

I just need work out how to turn off autoscroll if possible, when you release the scrollbar.

[akapowl]

1 hour ago, kpkreative said:

I just need work out how to turn off autoscroll if possible, when you release the scrollbar.

 

Sound like you don't want it to snap? Just get rid off this part:

 

1 hour ago, kpkreative said:

ScrollTrigger.create({
  snap: 1 / 5 // snap whole page to the closest section!
});

 

[kpkreative]

@akapowl I can't thank you enough, you are an absolute hero!

Apologies for all of the questions, I'm taking time to learn this functionality, though had a piece of work that was urgent.

Thanks again for all of your help, its very much appreciated

[Juan Munoz]

@akapowl Hi, thanks for solution, works good for me, I have another question. Can this be responsive? When I resize window I need recalculate spaces. Thanks

[Juan Munoz]

@kpkreative Hi, thanks for solution, works good for me, I have another question. Can this be responsive? When I resize window I need recalculate spaces. Thanks

[akapowl]

 

Posting your question once is enough, @Juan Munoz

 

But I'm not sure what exactly you mean by 'responsive', as the example I posted above, should be fully working after resizes and there is nothing in it that would need recalculation of any sort. It would be best to add a minimal demo alongside your question, to make it easier to understand. Thanks.

[Rodrigo]

Hi,

 

Give Match Media a try:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Happy Tweening!