Keep top/bottom content in place when pinning

[ilovecheese]

I am wondering if I can keep the content above and below the pinned item in place, while the targeted div does the clip-path reveal. Most of the examples I see have the divs at 100vh, so you never see what's above or below. I have a working example that is close to what I am wanting, where I want to "lock in" the top/orange area and the bottom/red area, while the purple/green reveal is happening. Then when done, continue scrolling down. As you can see in my example, the bottom/red area is not where it needs to be when the effect starts, since the pinning padding is pushing it down. I have added pinSpacing: false, but that doesn't help.

 

Thanks.

See the Pen ZEKqwdp by ilovecheese (@ilovecheese) on CodePen

[akapowl]

 

Hey @ilovecheese,

 

Sorry for the delayed reply, your question must have slipped through.

 

What you can do, is wrap all your content in a div and in your ScrollTrigger pin that wrap instead of that section. Like this maybe:

 

See the Pen 2def4c19b590842753175ff01adbc988 by akapowl (@akapowl) on CodePen

 

 

For any subsequent ScrollTriggers on elements within that wrap you will then have consider using the pinnedContainer property, because their start/end will likely be misplaced due to the pinning as they are within the pin-spacer of that wrap and thus can not take that pin-spacing into account. You'll find more info on pinnedContainer in the ScrollTrigger docs.

 

Hope that helps. Happy scrolling and welcome to the forums!

 

[Cassie]

Nice catch @akapowl 💜

Sorry we didn't get to you sooner @ilovecheese

[ilovecheese]

Thank you @akapowl. I see what you're saying about using pinnedContainer if I had others, but what you've provided works since all I have is that one section.

[BeEnder]

@akapowl Thank you for your example two years ago. It helped me a lot to understand how pin is working.

Unfortunately pin: '.wrap' does not work if i have two pinned elements in a row. See my example:
 

See the Pen JjwWqzo by philipp-bender (@philipp-bender) on CodePen

[akapowl]

 

Welcome to the forum, BeEnder.
 

1 hour ago, BeEnder said:

Unfortunately pin: '.wrap' does not work if i have two pinned elements in a row.

 

That is because:

1. You didn't include the pinnedContainer property as I mentioned above would be neccessary on any subsequent ScrollTriggers in the same wrapping element.
    

   On 8/11/2021 at 10:59 AM, akapowl said:

   For any subsequent ScrollTriggers on elements within that wrap you will then have consider using the pinnedContainer property, because their start/end will likely be misplaced due to the pinning as they are within the pin-spacer of that wrap and thus can not take that pin-spacing into account. You'll find more info on pinnedContainer in the ScrollTrigger docs.

   
    

2.  You are using older versions of GSAP / ScrollTrigger (3.11.4) that might have had issues with pinning at some point.
   The current versions are 3.12.2

 

I updated to the latest versions and added the property as mentioned above and it looks to be working as intended.

See the Pen zYyZVyK by akapowl (@akapowl) on CodePen