Jump to content
Search Community

Can't get ScrollTrigger pin to properly work

hoxifo test
Moderator Tag

Recommended Posts

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

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...