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!

[Hud1ai2]

Thank you for this advice. I tried it in Bricks Builder but I have one problem. The scrolling is working but the stacking works wrong - cards stop at same place (same size and no offset). Should I set something different?

[Rodrigo]

Hi @Hud1ai2 and welcome to the GSAP Forums!

 

Without a minimal demo is hard to know exactly what could be the issue, but maybe just offset the start value as shown in the latest demo I posted:

start: "top " + (60 + 10 * i),

Hopefully this helps

Happy Tweening!

[Hud1ai2]

Thank you for such a quick response. I can't made a demo because I'm using a Bricks Builder, so I don't know if there isn't set something behind. And url of that site doesn't help neither I think.

 

BTW ChatGPT told, that code what you metioned is wrong but this works. Problem is somewhere else.  GPT also told me that there is somewhing wrong because GSAP is reseting the transformations when the move of card is ended and adviced me to add this code. 

toggleActions: "play none none none"

So may I send you the web address?

[Rodrigo]

A live URL of a production site doesn't really help us pinpoint and identify the problems you could have, that's why we ask for a minimal demo (emphasis on minimal) for helping, it's easier and way faster.

 

You can fork this codepen starter template that loads all the plugins:

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

[Hud1ai2]

So I've found the problem finaly. Because I need to start the animation little bit later, because of the height of my header (without it the animation does finish below the header), I used this line

start: "top-=200px" + (60 + 10 * i),

But the result is that the animation doesn't work properly. So my question is, how to move whole animation "little bit lower". I tried to add 200px to the top and the same for the end. So is there some way, how to make this? To add some offset or something like this. So maybe use another start trigger?

[Rodrigo]

Yeah, play with the start value in the ScrollTrigger configuration. Keep in mind that this:

start: "top-=200px 200",

Tells ScrollTrigger to start the animation and trigger the onEnter callback, when the top of the trigger element minus 200px (that is 200 pixels above the top of the trigger) reaches 200 pixels from the top of the viewport. Is always a good idea when developing and debugging an issue to use markers inorder to understand where and when the ScrollTrigger instances are actually triggering.

 

Also you could have some layout shifting because of some images could be loaded after creating the ScrollTrigger instances, which makes the calculations made by ScrollTrigger off. Also some custom fonts could be loaded after creating the ScrollTrigger instances, which also could create a layout shift. You can use the load method from the window object

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

And/Or the document.fonts API to create your ScrollTrigger instances after everything is loaded and rendered correctly in the DOM:

https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts

 

As mentioned before without a minimal demo, I'm just guessing blindly here.

 

Hopefully this helps

Happy Tweening!

[Hud1ai2]

Thank you again for your time and advices. I have it. The solution was, to set the start like this

start: "top " + (200 + 20 * i),

So the last thing what I would like to solve is to make it more robust. Because now we need to have the fixed height of cards. This isn't good. I would prefer to use paddings in cards only. I don't know, if they use GSAP, but this solution looks well 

https://www.security.cz/proces-zakazky

[Rodrigo]

Hi,

 

I couldn't really tell you if that site is using GSAP or not, but a full 100% responsive solution could require some custom logic especially for the end point, because that would be the tallest card's height plus some padding in the bottom, that is basically the hard coded end point here:

end: "bottom 550",

Since each card is 400px height and there is a padding at top and bottom we add those and come up with the value that should be the end point from the top of the viewport and since the endTrigger is the wrapper we use the bottom of the wrapper or section that has all the cards to set said end point.

 

Hopefully this clear things up

Happy Tweening!