Jump to content
Search Community

pinning and pin-spacer gap

brandonifi test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

  • Solution

 

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

  • Like 4
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.
×
×
  • Create New...