Jump to content
GreenSock

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

Fix section overlapped by another with gradient

Recommended Posts

Hello, i am trying to make the spacer section to be or look like fixed element and when you scroll the hero section overlap it, but as you way see the it doesn't work properly.

 

See the Pen KKgGWaV by skigo (@skigo) on CodePen

Link to post
Share on other sites

Hey  @kobracode

 

If you want that section to scroll over the previous one, you could/should set pinSpacing to false on that pin of that first section.

If that is done, it still appears that the first section is above the second one on the z-index, so you'd have to specify a z-index for each of those sections (alongside adding a position: relative to them for it to work).

 

Also an extra suggestion from my side would be to change the end of your ScrollTrigger to something bigger than "+=100%" or otherwise in this setup you will see a nasty color-block moving upwards through the opaque parts of your gradient there, when scrolling up and the first section unpins; I chose "+=300%" and it seems fine.

 

See the Pen MWjPopd by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

  • Like 4
Link to post
Share on other sites

Hello @akapowl,

take a look to the screenshot, i need when the section is in that view, color should be full.So i was thinking about if its available to change the background gradient to: default state (background: linear-gradient(0deg, rgba(217, 217, 214, 1) 55%, rgba(217, 217, 214, 0) 100%); and when is scrolling changing the (55%) value to 100% is that possible?

See the Pen XWjxyOX by skigo (@skigo) on CodePen

 

thanks

Screenshot 2021-01-13 at 11.33.36 AM.png

Link to post
Share on other sites

 

I wansn't aware of that myself, but it looks like it should be possible

 

See the Pen JjRmVNO by akapowl (@akapowl) on CodePen

  • Like 3
Link to post
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.

×