Pinning a child element within a pinned parent element

[qorinn]

 

I have a pinned element inside my main section, and at the end I want the footer to scroll/reveal into the viewport when the page reaches the bottom.

The issue happens when #pinnedElement has pin: true: the main/footer pin calculation glitches and cuts off part of the main content. If I set pin: false on #pinnedElement, you can see the intended footer behavior.

I tried pinReparent, refreshPriority, invalidateOnRefresh and manual ScrollTrigger.refresh(), but it still glitches.
#pinnedElement must stay pinned, but any workaround for revealing the footer another way is fine.

See the Pen NPbYeyN by qorinn (@qorinn) on CodePen.

[Rodrigo]

Hi @qorinn and welcome to the GSAP Forums!

 

This is completely possible, the issue is that you're running into some conflicts with two things. The config option should be set to true:

// This doesn't make any difference:
ScrollTrigger.create({
  //...
  pinReparent: false, // this is the default value
});

// This works in the way you intend
ScrollTrigger.create({
  //...
  pinReparent: true,
});

Second issue, order of operation:

https://gsap.com/resources/st-mistakes#creating-scrolltriggers-out-of-order

 

In this case the footer instance happens after the other ScrollTrigger, in fact it should happen after every other ScrollTrigger in the page otherwise you'll run into different problems.

 

Here is a fork of your demo (thanks for providing a really simple one, we love those around here 😉) that seems to work the way you expect:

 

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

 

Hopefully this helps

Happy Tweening!! 💚

[qorinn]

Thank you! This did fix the original issue.

I then tried adding SmoothScroller, however when SmoothScroller was active, the pinning broke again. 

I found a solution, by setting pinnedContainer: ".main" fixes the issue. For me this makes sense, because #pinnedElement is inside .main and .main also gets pinned. Please confirm, this is the correct use of pinnedContainer (so I, and maybe future forum readers can learn) or am I just lucky? Is this the recommended fix for this issue?

Pen: 

See the Pen MYbGwRL by qorinn (@qorinn) on CodePen.

[Rodrigo]

Indeed, in the odd cases that a parent element is pinned and then a child element is pinned as well, pinnedContainer is a good solution because it tells ScrollTrigger that it has to take into account the pin space (or the amount of pixels for a simpler explanation) of the parent element, otherwise the calculations will be off and you'll get some odd behaviour. As for being lucky I wouldn't call it like that, you researched the API and found something that was intuitive and applied to your situation, so I would say that you learned something by going through the available resources 🥳🙌

 

Let us know if there's anything else we can do to help!

 

Also remember we have a Discord server as well:

https://gsap.com/discord/

 

Happy Tweening! 💚