Jump to content
Search Community

Fix section overlapped by another with gradient

kobracode test
Moderator Tag

Recommended Posts

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 1628807ac2fa27fb0e7fb81583171e84 by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

  • Like 4
Link to comment
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 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...