Pin is working, but nothing is scrolling over it

[LSchneiderman]

I want to have a full-screen image pin while text boxes scroll over it. 

 

I have the pin working, but nothing happens on scroll until it unpins -- the text box doesn't scroll over it.

 

Could use some help please on what I'm doing wrong.

See the Pen vYVGEqM by lschneiderman (@lschneiderman) on CodePen

[GreenSock]

By default, it'll add pinSpacing to push things below it further down so that they don't overlap, but you can just set pinSpacing: false.

 

You've got several CSS-related issues going on too that cause the text not to show up on top of the image and your page isn't scrollable enough to even see the text adequately, plus if you've got something position: fixed (the default pinning behavior), the browser can't clip it with overflow: hidden of its container but I imagine this might be close to what you're looking for: 

See the Pen bGmpdMW by GreenSock (@GreenSock) on CodePen

 

There's probably an even cleaner way to set things up. I wonder if you're looking for something like https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

[LSchneiderman]

@Jack Thanks!!