Share Posted January 12 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
Share Posted January 12 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 4 Link to post Share on other sites
Author Share Posted January 13 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 Link to post Share on other sites
Share Posted January 13 I wansn't aware of that myself, but it looks like it should be possible See the Pen JjRmVNO by akapowl (@akapowl) on CodePen 3 Link to post Share on other sites
