Dynamically pinning/unpinning a section — GSAP ScrollTrigger

[Akish]

Hi, I have the following DOM structure:

 

<section class="GridWrapper__Story">
  <Section 1/>   ← contains animations
  <Section 2/>  ← should appear fixed/ behind Section 1 until the mask animation.
</section>

 

The goal:

• Section 2 should stay pinned in place while Section 1 scrolls over it with a mask reveal animation
• Once the mask fully reveals Section 2, it should unpin and scroll naturally into the next sections (reversible)

My current approach is pinning Section 2 and dynamically enabling/disabling it based on scroll position. The issue is after the mask animation is finished, Section 2 snaps to a weird scroll position.  I'm open to alternative approaches if there's a cleaner or more reliable way to achieve this.

See the Pen pvEKeVG by akishjoseph (@akishjoseph) on CodePen.

[Rodrigo]

Hi,

 

For that is better to have the elements layered on top of each other ahead of time. There is a good chance that this could be achieved with elements in normal document flow, but it would require some custom logic and CSS. It's far easier to add two elements to the same parent, one with position absolute and pin the parent element using ScrollTrigger.  Then move the one at the top up until it reveals the one at the bottom, then you can unpin the parent element.

 

Here is a simple demo showing how to do that:

See the Pen PwGBEVJ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Akish]

Thanks  for the help!
I was trying to achieve this with the normal document flow using grid by stack elements on top of each other instead of position: abosulte; 
because I couldn't have the height in absolute units. Eventually I got it done with two scrollTriggers
 

endTrigger: section_1,
 end: () => {
   const contentHeight = section_1.offsetHeight;
   const factor = ScrollTrigger.isTouch ? 1.4 : 1.6; 
   return `+=${contentHeight * factor}`;
 },

pin: section_2,