New To GSAP - Card Stacking Via ScrollTrigger?

[pixx4sixx]

Hi All, I'm fairly new to GSAP and JavaScript in general so forgive me for my ignorance. 

 

I'm trying to build a card stacking type feature for a team member section for our company and I've got it working for the most part however there are 3 rows, and only the second row is stacking. The 3rd row simply slides up to the bottom of the second row. I am certain this is because of the yPosition being at -90 (the 3rd row is only moving up that amount) but for the life of me I cannot figure out how to get each subsequent row (minus the first one) to stack as I would like. 

 

See the Pen vYMLRJy by michaelfroseth (@michaelfroseth) on CodePen

[mvaneijgen]

Hi @pixx4sixx welcome to the forum!

 

10 minutes ago, pixx4sixx said:

but for the life of me I cannot figure out how to get each subsequent row (minus the first one) to stack as I would like

Ha, I've seen a lot of people doing this! It is much easier to have all the cards start at the same position and then move them away from there. I've all written this down in the post linked below, give that a read and post back here if you have any questions. This quote of yours is exactly how my post starts! Hope it helps and happy tweening! 

 

 

[pixx4sixx]

7 hours ago, mvaneijgen said:

Hi @pixx4sixx welcome to the forum!

 

Ha, I've seen a lot of people doing this! It is much easier to have all the cards start at the same position and then move them away from there. I've all written this down in the post linked below, give that a read and post back here if you have any questions. This quote of yours is exactly how my post starts! Hope it helps and happy tweening! 

 

 

Thank you very much for your reply and the topic to read. It makes a lot of sense to start from the end position but for my desired effect I couldn't quite wrap my head around how to do that and still have the "stacking" effect, rather than the reverse. I was able to achieve my desired effect by adding an if statement to the y property but I'm having another issue, which I think is solved by your suggestion of starting at the end position. But I'm lost at the moment!

 

The issue I am noticing (with my fix) is that there is a large gap below the last row that gets stacked. I imagine this is because the parent section is calculating its height based on the original position of these rows, and not taking into account their end position, which would look far better on the page. 

 

I did update my codenpen in the original post with what I did as a solution. I am certain it's a bad work-around so I am all for the criticism. 

 

Hopefully this all makes sense, I'm still learning how to articulate all of this stuff into words.  

[mvaneijgen]

Yep, everything would be fixed if you used the suggested structure. Have you seen the following pen underneath the paragraph

Quote

Ok let's explore this further. You want to visually show that it is a stack of cards, so you need an offset at the top of your cards. Just use gsap.set() to offset the cards based on their index and done! I hope you can see that you could easily change all the x properties to y and have the effect be vertical.

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

 

11 hours ago, pixx4sixx said:

The issue I am noticing (with my fix) is that there is a large gap below the last row that gets stacked. I imagine this is because the parent section is calculating its height based on the original position of these rows, and not taking into account their end position, which would look far better on the page. 

This is correct, better yet the images are still at their original position as far as the browser is concerned. You've just moved them visually with the CSS transform property. That is why having them stack with CSS grid right on top of each other and then moving them off screen with GSAP is such an easier way of working with it. 

 

11 hours ago, pixx4sixx said:

I did update my codepen in the original post with what I did as a solution. I am certain it's a bad work-around so I am all for the criticism. 

If it works it works! But now I'm the client and I want them to animate from right to left and could you make it so that each picture rotates a bit when they slide in. In your current setup this will require a rewrite of all your logic and with the suggested workflow this would be a breeze to implement. That's why I'd written the post, working that way allows you to create any card stacking effect all based on the same fundamental structure. 

 

Hope it helps and happy tweening! 

 

 

Edit: If you have read the topic and still have questions, check out this I’ve placed some comments  to better explain things, please be sure to read through them!

[pixx4sixx]

6 hours ago, mvaneijgen said:

Yep, everything would be fixed if you used the suggested structure. Have you seen the following pen underneath the paragraph

 

 

 

This is correct, better yet the images are still at their original position as far as the browser is concerned. You've just moved them visually with the CSS transform property. That is why having them stack with CSS grid right on top of each other and then moving them off screen with GSAP is such an easier way of working with it. 

 

If it works it works! But now I'm the client and I want them to animate from right to left and could you make it so that each picture rotates a bit when they slide in. In your current setup this will require a rewrite of all your logic and with the suggested workflow this would be a breeze to implement. That's why I'd written the post, working that way allows you to create any card stacking effect all based on the same fundamental structure. 

 

Hope it helps and happy tweening! 

 

 

Edit: If you have read the topic and still have questions, check out this I’ve placed some comments  to better explain things, please be sure to read through them!

Thank you again for your detailed response. I'm having a hard time wrapping my head around using the grid system for this layout without using flexbox. I have only used flexbox in my limited time trying to develop things (I'm a designer, learning development on my own).

 

From my understanding the stacking works much better using grid, but I'm not understanding how to achieve the 3 columns of images per row, or if I even need to use rows anymore. Grid seems to spread things out automatically without the use of rows. Again, sorry for my ignorance, I'm learning!

 

Once I can understand that, I think I can stack these at the beginning, and then work on the animation per your helpful codepens and thread. 

[pixx4sixx]

9 hours ago, mvaneijgen said:

Yep, everything would be fixed if you used the suggested structure. Have you seen the following pen underneath the paragraph

 

 

 

This is correct, better yet the images are still at their original position as far as the browser is concerned. You've just moved them visually with the CSS transform property. That is why having them stack with CSS grid right on top of each other and then moving them off screen with GSAP is such an easier way of working with it. 

 

If it works it works! But now I'm the client and I want them to animate from right to left and could you make it so that each picture rotates a bit when they slide in. In your current setup this will require a rewrite of all your logic and with the suggested workflow this would be a breeze to implement. That's why I'd written the post, working that way allows you to create any card stacking effect all based on the same fundamental structure. 

 

Hope it helps and happy tweening! 

 

 

Edit: If you have read the topic and still have questions, check out this I’ve placed some comments  to better explain things, please be sure to read through them!

I ended up using flexbox as the rows within the grid (not sure if I should have), and was able to get the desired effect by using negative margins via css. I've placed my progress in the CodePen but can't figure out how to add it here again. CodePen

 

This solves the issue of there being a big gap at the bottom, and I'm getting the desired result for the most part, although it's been tricky to get these right on smaller screens (I'm working on it). But I'm curious if I've done this correctly in your eyes? Or is there something I should be doing differently/can improve on? I'm also noticing poor performance on mobile but that may be on my CSS or HTML structure rather than GSAP. 

Again, Thank you very much for your responses. They've helped tremendously. 

[mvaneijgen]

The stacking via grid is literally some piece of code your can steal from my second pen in the post. 
 

you can also check the secret link I’ve posted in my previous post 😉 if your stuck an need a hint. 
 

no worries about asking questions, I’ve been there. Graphic designer  who’ve thought my self to code a few years back. 

[pixx4sixx]

4 minutes ago, mvaneijgen said:

The stacking via grid is literally some piece of code your can steal from my second pen in the post. 
 

you can also check the secret link I’ve posted in my previous post 😉 if your stuck an need a hint. 
 

no worries about asking questions, I’ve been there. Graphic designer  who’ve thought my self to code a few years back. 

That's actually where I grabbed your code from and have been working from that (the updated pen in my original post includes that) but I couldn't understand the grid part. I'm just not familiar with it and everything I've tried to read online says that grid can't stack or take up the place of another grid item, which is why I ended up at using negative margins, which may not be right... I'm probably not looking in the right spots, but can't figure it out for the life of me.