codeSanjay Posted February 8, 2023 Share Posted February 8, 2023 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 More sharing options...
Solution GreenSock Posted February 9, 2023 Solution Share Posted February 9, 2023 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? 2 Link to comment Share on other sites More sharing options...
codeSanjay Posted February 9, 2023 Author Share Posted February 9, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now