brandonifi Posted July 14, 2021 Share Posted July 14, 2021 In this example, I've got a video that scrubs through as you scroll. Is there any way to pin the video, like it is, still be able to keep the 'after content' div tight up against the bottom of the video, rather than adding the extra space via the pin-spacer div? (Best viewed in a tall, desktop screen, so you can see the gap below) Let me know if I need to provide any more details than what's in this quick Codepen. Thanks for any help! See the Pen jOmyepZ by bmartus (@bmartus) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted July 14, 2021 Solution Share Posted July 14, 2021 Welcome to the forum @brandonifi. You could just pin the surrounding container instead. Not that it is the case in your demo, since you don't have more than that one ScrollTrigger here, but it is worth mentioning that this will lead to misallignments on elements you want to trigger animations later on though, since they can't take that pin-spacing into account. That will be a good usecase for the pinnedContainer property then. Here is a demo with a scrub on that very last section showing what I mean. Hope that helps. Happy scrolling See the Pen ce612d4c3f9cb67a74a7ba11183416aa by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
brandonifi Posted July 14, 2021 Author Share Posted July 14, 2021 Looks like this should work perfectly. This page only has the one ScrollTrigger animation right now, so we should be good. Thanks for the quick reply! 2 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