Pinned position / height

[De Internetarchitect]

Hi GSAP folks,
 

I have cards that are animated with GSAP.
However, there is a large amount of space before and after the cards.

I want the cards to appear directly below my tagline and title, so that the title remains visible while the cards animate into view.

I’ve tried multiple approaches, but I can’t seem to achieve the desired result.

I’ve added a screenshot to show the intended layout for this section: the cards should sit directly below the title, without the excessive empty space at the bottom of the section.

Here is my CodePen:

See the Pen gbMpgGB by Michiel-Vos (@Michiel-Vos) on CodePen.

[Rodrigo]

Hi,

 

When dealing with pinned elements/sections whose height is less than the height of the screen, the best approach is to wrap the sections you want to remain visible in a parent element and pin that parent element, like that all the sections will remain visible while pinned.

 

These demos show this approach:

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

 

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

 

Hopefully this helps

Happy Tweening!