Jump to content


Can't get ScrollTrigger pin to properly work

Moderator Tag

Recommended Posts


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

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!

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.