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

@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

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

@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.

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

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

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

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