Card overlapping effect when scrolling

[PavelD]

Hello!

I'm trying to implement the effect of cards overlapping each other when scrolling, like here (Section "Joining the
protection").

 

This is what I got, but this is not exactly what I want to get. Please tell me how to implement a similar effect using GSAP?

See the Pen poBNqwL by UnluckySerivelha (@UnluckySerivelha) on CodePen

[mvaneijgen]

Check out this post I made exactly because of these kinds of questions. The main gist is that you want to start with all the cards at the same position and just move them from there. I think this post really helps you understand how this works, but if you still need help post back here and show in a new demo what you've tried. Hope it helps and happy tweening! 

 

 

[PavelD]

8 hours ago, mvaneijgen said:

Check out this post I made exactly because of these kinds of questions. The main gist is that you want to start with all the cards at the same position and just move them from there. I think this post really helps you understand how this works, but if you still need help post back here and show in a new demo what you've tried. Hope it helps and happy tweening! 

 

 

Thank you for answer! I found a codepen that is very similar to what I want:

See the Pen mdojxbN by mvaneijgen (@mvaneijgen) on CodePen

.

But I want to change the height of the cards so that it is not equal to the height of the window.
I change 100svh in CSS to 300px and "window.innerHeight" to 300 in JS, but in this case the animation does not work correctly.
Could you please point out where I'm going wrong?

See the Pen poBRyrB by UnluckySerivelha (@UnluckySerivelha) on CodePen

[Rodrigo]

Hi,

 

Is just a matter of making the correct calculations. For that is better to use a to() instance and yPercent instead of y:

// Animte cards up from off screen one by one.
tl.to(".card-wrapper:not(:first-child)", {
  yPercent: (i) => -100 * (i + 1),
  duration: time/2,
  stagger: time
});

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[PavelD]

53 minutes ago, Rodrigo said:

Hi,

 

Is just a matter of making the correct calculations. For that is better to use a to() instance and yPercent instead of y:

// Animte cards up from off screen one by one.
tl.to(".card-wrapper:not(:first-child)", {
  yPercent: (i) => -100 * (i + 1),
  duration: time/2,
  stagger: time
});

Here is a fork of your demo:

 

 

 

Hopefully this helps.

Happy Tweening!

Wow! This is exactly what I wanted, thank you, you are amazing!
 

There is a small problem. I see that in your fork there is a lot of empty space after the cards. I tried to figure it out and experiment, but I don't understand where it comes from. Can you give me some advice?

[Rodrigo]

Hi,

15 hours ago, PavelD said:

There is a small problem. I see that in your fork there is a lot of empty space after the cards. I tried to figure it out and experiment, but I don't understand where it comes from. Can you give me some advice?

That indeed comes from the fact that you are moving the cards along in the Y axis while is container is standing still, that inevitably will lead to that empty space.

 

If you want to avoid that I'd recommend a different approach that pins each card and not the cards container or the entire section, like this:

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

 

Hopefully this helps.

Happy Tweening!