Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dipit Maurya

Overlapping Section Over Animation

Go to solution Solved by akapowl,

Recommended Posts

Hi everyone,

I am new to GSAP. trying to create a  Shrinking header animation.  I am trying to reduce the height of 1st section (Faded yellow) using scrollTrigger . But the issue is second section(Blue section) is hiding behind the 1st section on scroll..

See the Pen ZEyeBPG by konnectdipit (@konnectdipit) on CodePen

Link to comment
Share on other sites

Hi Dipit - I'm a little confused about the end goal.

You have position sticky on your header in your CSS which would usually have an effect of pinning and the content scrolling underneath.

Just to clarify - you want the header to shrink but the section below it to *never* scroll underneath?

You're looking for the header to shrink and also scroll along with the page?

Link to comment
Share on other sites

18 hours ago, Cassie said:

Hi Dipit - I'm a little confused about the end goal.

You have position sticky on your header in your CSS which would usually have an effect of pinning and the content scrolling underneath.

Just to clarify - you want the header to shrink but the section below it to *never* scroll underneath?

You're looking for the header to shrink and also scroll along with the page?

Hi @Cassie,

Actually i don't want second section beneath until animation of  first section finished.  after that it should scroll beneath the header.

Link to comment
Share on other sites

Hmm. This is really tricky. There's a lot of conflicting layout behaviour here.

If you change the height of the first section when the nav is position relative then the second section will flow after it nicely - but the whole page will scroll.

If the first section is pinned from the start, and animate the height there will be a big gap before the content scrolls underneath...

If you add pinspacing:false  then it will be then the second section will scroll directly underneath.

 

---

 

This seems to need to cherrypick different relative and fixed behaviours at different times?

I tried pinning the body element to avoid the page scrolling while scaling a relative container - then changing the nav to position fixed onLeave but the nav is 'fixing' to the bgBlue container instead of the body. I assume it needs to be reparented because some transforms are throwing off the positioning?

See the Pen ExXWBvm?editors=0010 by GreenSock (@GreenSock) on CodePen



Tried two separate scrollTriggers too, but again - gap. Even tried pinContainer.

See the Pen XWgMLoa?editors=0010 by GreenSock (@GreenSock) on CodePen



This has got me really confused, the combination between needing relative and fixed is tricky - I might be missing something, maybe @akapowl can help?

Maybe the first section's height needs to be scaled at the same time as the second section's y position transformed?

Link to comment
Share on other sites

  • Solution

I can give it a try, but I'm not sure, I 100% understood the end goal here.

 

This is what I've got:

 

The nav is position: fixed with the content underneath it being position: relative and the first section having a margin-top of 600px - this will push everything down the amount of space the nav needs to be displayed fully initially with the content underneath it (on y-axis).

 

In the ScrollTrigger I set an ease: 'none' to the animation so it will be in sync with  the scroll and since you will reduce the height of the header by 400px, the end of that scrollTrigger is set to that exact amount "+=400px", so the content beneath the nav will scroll along with the reduction of the height of the nav. Is this close to what you wanted, @Dipit Maurya ?

 

See the Pen 1ef841222e3f65cd77ef4758e065da6a by akapowl (@akapowl) on CodePen

 

 

 

Edit

It might be better to wrap all that content in another div, set a padding-top of 600px to that wrapping div instead of the margin-top on the first section and also use that wrapping div as the trigger instead of the nav - as I noticed that if you refresh the page further down, the animation will not have finished when it probably is expected to be; now it will/would.

 

See the Pen 3f4776e49e46d84508782ce769796fab by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

Yeah of course, a margin top on the content would make way more sense.

Link to comment
Share on other sites

It's sometimes so hard to back your brain up once you start overcomplicating things 

  • Like 3
Link to comment
Share on other sites

11 minutes ago, Cassie said:

It's sometimes so hard to back your brain up once you start overcomplicating things 

 

Totally is! It's the famous forest that you can not see for all the trees.

Just hoping, that this is the forest, Dipit was looking for 😅

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