Jump to content
Search Community

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

kpkreative test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!
});

 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

 

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...