Jump to content


Sticky title using GSAP

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

The Scenario is I have a certain scroll animation at the top of the page and I need to pin whole wrapper. And I have a certain content whose title needs to be sticky. Now the problem is whenever I pin the whole section for the first animation, the sticky title pins weirdly as shown in codepen example. Am I missing something here?  Thanks in advance

Note: The sticky title pins fine whenever I just pin the section (not whole container ) of the first animation.

See the Pen gOjJdjG by devSanjay (@devSanjay) on CodePen

Link to comment
Share on other sites

  • Solution

Pinning is a pretty complex procedure and you can't really have nested pins like that. However, you can tap into the pinReparent feature that basically forces the pinned content into the very root <body> while it's pinned: 

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


Notice that I had to set overflow: hidden on your .text-wrapper element, otherwise the translated element might poke out the bottom and extend the size of that section. 


It's generally best to avoid pinReparent because it can be a bit expensive performance-wise, but it's the only solution in this case that I can see.


Does that help? 

  • Like 2
Link to comment
Share on other sites

Thankyou @GreenSock , that was really helpful. As you have suggested I will try to avoid nested pins as much as possible.

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.