scrolltrigger Overlapping Section Over Animation

[Dipit Maurya]

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.

[Cassie]

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?

[Dipit Maurya]

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.

[Cassie]

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?

[akapowl]

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.

[Cassie]

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

[Cassie]

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

[akapowl]

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 ?

[Dipit Maurya]

Yes, This is what i was looking for.. You guys are awesome ?  @Cassie @akapowl.

 

Thanks.