Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kpkreative

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

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

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

  • Like 2
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

@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 :)

  • Like 4
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.
×