ScrollTrigger + Pin = issues height

[lofka]

Hello,

 

I'm trying to create an animation with "scrollTrigger + pin" with 2 cards ( overlap + scale on scroll ).
The animation works fine but in the end I have way too much empty space and I don't know how to fix this.

I put 2 images to explain the problem and the desired result.

 

Demo

 

Visual Bug

Expected

 

See the Pen ZEZzarJ by paallaire (@paallaire) on CodePen

[mvaneijgen]

Hi @lofka welcome to the forum!

 

The issue is that your elements are in these locations and then with an animation you move them up. You do this with transforms (which is great), but this leaves a 'ghost' location of the original element. 

 

I've written a guide how you can go about creating stacking cards animations with some simple steps, there are a lot of examples in that post and even more in a codepen collection linked in the post, so there is probably something you can use as a starting point. But be sure to read the post because it goes over some key points which will allow you to make any card stacking animation. Hope it helps and happy tweening! 

 

 

[lofka]

@mvaneijgen Thank

 

Demo Part 2

See the Pen xxeKeLe?editors=1010 by paallaire (@paallaire) on CodePen

 

I think I found a solution:

• Put the cards in "absolute" position
• Add a height on the wrapper with a "set" (according to height of the 2nd card + the percentage of translation in Y).

 

However adding the height to the "set" wrapper does not update when resizing the window

 

Does gsap have anything to handle this case? Like invalidateOnRefresh for set ?

 

    gsap.set(block, {

      height: () => {

        const containerHeight = items[1].offsetHeight + items[1].offsetHeight * 0.2;

        return containerHeight;

      },

      onComplete() {

        console.log('onComplete:');

        animation();

      }

    });

 

[mvaneijgen]

Instead of absolute make the container display: grid with one cell having all elements in that one cell. With absolute the elements get removed form the from the document flow, and with grid they all stay in the flow, which is much easier to handle. 

 

This all is explained in the post I've linked, so I highly recommend taking a look at that.