Can't get ScrollTrigger pin to properly work

[hoxifo 0 Likes (Newbie)]

Hello, 

I'm having trouble trying to get this animation to work. What I'm wanting is to have a section that has a height 80vh and right below it another section of 100vh. Inside the first section a container with some text and as I scroll down, the text fades in while the first and second sections are pined (don't move). Right now I have nearly everything working. But the contents of the second section are not pined and as I scroll and the text reveals, the content moves and ends up overlapping the first section. I don't want anything to move until the text is all faded in. I've attached the the CodePen demo that hopefully explains the issue. I added z-index to the content of the second section so you can see it better overlapping. I thought preventOverlaps: true would fix the issue but it doesn't. Setting pinSpacing to True does what I want, but you can't see the second section because of the padding.

See the Pen mdzgPOp by hoxifo (@hoxifo) on CodePen

[Rodrigo 5,888 Likes (Superhero)]

Hi @hoxifo and welcome to the GreenSock forums!

 

There are a few approaches I can think for this. The simplest one is to wrap both sections in a container and pin that container:

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

 

Hopefully this helps.

Happy Tweening!