ScrollTrigger with multiple sections using height: auto

[hugo_dwt]

Hi everyone,

I'm trying to create a fade animation on cards (.cards) inside sections (.section--pinned) using ScrollTrigger.

Here is what I’m aiming for:

• Each section should have an automatic height (height: auto), based on the tallest card.
• Sections should not take up the full viewport height.
• The animation should start when the center of the section reaches the center of the viewport.
• During the animation, the rest of the page should be pinned (frozen effect).

I created a CodePen to demonstrate the behavior, but it behaves differently from my actual project (my source files are also provided).

 

In my project, the behavior is almost correct except for one issue:
👉 I have two .section--pinned sections, and as soon as the first one is reached, the animations of both sections run one after the other immediately, even though they are separated by another section in the HTML.

 

I would expect each section to trigger its animation independently.

 

Does anyone have an idea what could be causing this behavior?

Thanks in advance 🙏

index.html scripts.js styles.css

See the Pen pvEVqqX by hugo_dwt (@hugo_dwt) on CodePen.

[Rodrigo]

Hi @hugo_dwt and welcome to the GSAP Forums!

 

Nothing wrong with what's happening in your demo, completely expected outcome for the code you have in place. The issue here is that ScrollTrigger can't guess, based on the fact you're pinning the parent of those sections, that there is a specific offset between pins. ScrollTrigger simply trigger the pinning and the Timelines based on the position of each element in the DOM. Those elements are inside the parent being pinned and pinning space only affects other elements in the same DOM tree level of the one being pinned, not it's child elements. For that you have to tell ScrollTrigger to create that offset, which can be done simply with the previous method and using a function based start point:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/previous()

 

Here is a fork of your demo that seems to work the way you expect:

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

 

Hopefully this helps

Happy Tweening!

[hugo_dwt]

Hello, thank you very much for your quick response.
I understand the logic better now.

Thanks!!