Jump to content
Search Community

Overlapping Section Over Animation

Dipit Maurya test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

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