ilyasseisov Posted August 25, 2023 Share Posted August 25, 2023 Good day! 👋 Could you please take a look a simple Pen: I don't understand why the image gets out its container? How do I pin it in place until the animation is finished? Thanks in advance! See the Pen abPvyWJ by jssecrets (@jssecrets) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted August 25, 2023 Share Posted August 25, 2023 Thanks for the clear demo. the image is in content. I gave content a red background. content appears to be pinned correctly. I extended the end value so there is more time to scroll See the Pen vYvNJRa by snorkltv (@snorkltv) on CodePen perhaps you meant to pin the purple section? or maybe I'm misunderstanding the issue. Link to comment Share on other sites More sharing options...
ilyasseisov Posted August 25, 2023 Author Share Posted August 25, 2023 Hi 👋 Quote Perhaps you meant to pin the purple section? Yes. Can you help with this? Link to comment Share on other sites More sharing options...
ilyasseisov Posted August 25, 2023 Author Share Posted August 25, 2023 17 minutes ago, Carl said: Thanks for the clear demo. the image is in content. I gave content a red background. content appears to be pinned correctly. I extended the end value so there is more time to scroll Quote perhaps you meant to pin the purple section? yes. Link to comment Share on other sites More sharing options...
Carl Posted August 25, 2023 Share Posted August 25, 2023 This was a little tricky due to how you were applying your css. when you pin elements they get wrapped in a pinSpacer div. this messes up your nth-of-type selectors. so once the second section got pinned, it no longer had height auto. now the 3rd section is the 2nd that gets selected with section:nth-of-type(2) { background: #8c75fe; height: auto; } I added inline styles to each section so you can now see what's happening. the second section has the class of .pinMe and is working as expected. See the Pen qBLOPdy?editors=1100 by snorkltv (@snorkltv) on CodePen Link to comment Share on other sites More sharing options...
ilyasseisov Posted August 25, 2023 Author Share Posted August 25, 2023 Thank you! But there is a white space that appears from somewhere and the purple section moves inside of it. I've attached the image. Is it possible not to have it? Can the purple section be fixed in place until image is done moving? Link to comment Share on other sites More sharing options...
Carl Posted August 25, 2023 Share Posted August 25, 2023 The white space is caused by the pin-spacer. this creates the necessary scroll distance for the user to continue scrolling while the elements are pinned. Please see the docs for my pinSpacing video https://greensock.com/docs/v3/Plugins/ScrollTrigger (which is also in ScrollTrigger Express) 1 hour ago, ilyasseisov said: Can the purple section be fixed in place until image is done moving? Yes, and it is fixed in place in the demo above as that is the one that is being pinned. Do you see it moving? When dealing with pinning, I've found for the best visual result you can just give the pinned element a height of 100vh. This way you don't see what's happening above or below as the page is scrolling: See the Pen RwEWjMV by snorkltv (@snorkltv) on CodePen Another option is to put the section that comes after the pinned element inside the pinned element. So in your case take the last section and put it in the pinned section. Another option is to explore giving surrounding elements or the body the same background color so you don't notice a gap. you can also style the pin-spacer with .pin-spacer { background:green; } Also, ScrollTrigger Express has a "Pinning Deep Dive" lesson (members only) that shows more about pinning too. 2 Link to comment Share on other sites More sharing options...
ilyasseisov Posted August 26, 2023 Author Share Posted August 26, 2023 Thank you very much Carl! It helped! 👍 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