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.
Can't get ScrollTrigger pin to properly work
in GSAP
Posted
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