Empty space under the last pinned element when scrolling

[maxmal]

Hi GSAP community,
Problem Description:

I'm encountering an issue where the last animated element isn't revealing correctly alongside the buttons and text below. They only show up once the animation is fully completed.
When viewing at 375px width (mobile view) with a large height, the issue is most pronounced. Check please CodePen on mobile screen sizes. My goal is for the top image to keep scrolling once it reaches the viewport's center, while the image beneath remains pinned until the top image's bottom edge aligns with the revealed image's top.

What I've Tried:

• pinSpacing: false – Resulted in overlapping.
• anticipatePin: 1 – No effect.
• Adjusted parent display properties like flexand grid.
• Experimented with negative margins.

 

Can anyone offer insights or suggestions?🙄🙋‍♂️
Thanks in advance!🤝

See the Pen WNLpqxa by maxmal (@maxmal) on CodePen

[Rodrigo]

Hi @maxmal and welcome to the GreenSock forums!

 

The main issue here is the fact that you are animating the same element that you are using as a trigger. Is highly recommended to not do that, especially since you are animating that element in the Y axis, which can cause issue with ScrollTrigger's calculations.

 

Here is a fork of your codepen example:

See the Pen rNomeKo by GreenSock (@GreenSock) on CodePen

 

Also you might want to check this example as it provides a different approach to this behaviour

See the Pen eYjoOEW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[maxmal]

Hi @Rodrigo thanks a lot for taking a look and quick response. 
Thanks for sharing the information that animating an element that is a trigger is not the best practice, for sure will remember it.  But still, this does not fix an issue. I've played around with different triggers and had no luck. 
Please find a screenshot in the attachment with some comments on it: 

[Rodrigo]

Hi,

 

That is related to the fact that the element being pinned contains just the images. In order to make it work the way you intend you'd have to wrap the element with the images and the element after that in the same parent and pin that particular parent element, as shown in these examples:

 

See the Pen LYMYYEL by GreenSock (@GreenSock) on CodePen

 

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[maxmal]

Hi Rodrigo,

Thank you for the suggestion. I understand the logic behind wrapping the images and the subsequent element in a parent container to address the pinning issue.

However, in the context of the project I'm working on, this solution isn't feasible. Here's why:

1. There are instances where only a single button exists without any text below it. When pinned with its parent, the lack of content beneath creates white space that pushes other content (like the footer) downward.
2. The project is constructed with stand-alone Vue components which are configured in the CMS. This means I can't easily wrap the subsequent component with the pinned one.
3. Even if it was possible to wrap the next component with the pinned container, there are cases where the wrapped component might not have enough height to cover the resulting empty space.

I appreciate your input and dedication to helping! 🙌

[Rodrigo]

Hi,

 

You could wrap the entire content of that page/route in order to pin that and avoid any space added by the pin space added by ScrollTrigger, like that it doesn't matter what the CMS throws at you, pinning the entire wrapper shouldn't cause that particular issue. Like the second example.

6 hours ago, maxmal said:

Even if it was possible to wrap the next component with the pinned container, there are cases where the wrapped component might not have enough height to cover the resulting empty space.

This sounds really odd to be honest. Normally DOM elements have an auto height which basically stretches to the height of it's child nodes:

https://developer.mozilla.org/en-US/docs/Web/CSS/height#formal_definition

 

So there shouldn't be any space especially if anything after that particular element is below the fold. It seems to me that maybe some CSS in your project should be reviewed.

 

Good luck with your project!

Happy Tweening!