pixx4sixx

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.

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.

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.

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.

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.