Pin only a certain number of elements at a time + pinned element height issue

[kanguyen-vn]

Hi! I forked some GreenSock code and made a stack of pinned cards like in the CodePen below. As each card comes in, it stacks on top of the one before with just a short section hanging out that indicates the card number. What I am trying and failing to accomplish is to pin only a certain number of cards at a time -- let's say 3, so that when cards 2, 3, and 4 are pinned and card 5 goes on the top of the stack, it should push one card off the stack (first in first out); the pinned cards would then become 3, 4, and 5. It feels doable but I can't come up with some kind of formula that will help me accomplish this. I'd appreciate any help with this issue. If it helps, in my JS code, the markerHeight variable indicates the height of the black-background section that says what number a card is.

 

There's also one other issue which I could not replicate in CodePen but hopefully I can describe it well enough. In the CodePen, after all the cards are stacked and I scroll up, the entirety of the last card (100vh) also scrolls up; this is the desired behavior. However, in my own project, the last card cuts off so that the height becomes only (100vh - n * markerHeight), if n is the 0-based index of the last card. I have made sure my project code is consistent with the CodePen code. I'd love any pointers w.r.t. this issue as well. I understand that this second one is hard to debug without the issue being replicated successfully, but hopefully somebody has run into something similar and can suggest a workaround. If not, that is totally fine.

 

Thank you all so much!

See the Pen poQwpMB by Kiet-Nguyen-the-bashful (@Kiet-Nguyen-the-bashful) on CodePen

[darkus]

This is a cool question.  

 

Im not sure if this is what you meant, but in my mind, I took the height of a card, multiplied it by 3, and made that the end height for any given pin

 

See the Pen zYMzJre by darkuss (@darkuss) on CodePen

[kanguyen-vn]

1 hour ago, darkus said:

This is a cool question.  

 

Im not sure if this is what you meant, but in my mind, I took the height of a card, multiplied it by 3, and made that the end height for any given pin

 

 

 

 

Hi, thank you! This is almost what I'm after, although I'd like every pinned group of 3 cards to also move to the top of the viewport. This is a great starting point though -- I'm currently still playing with it to figure this out.

[kanguyen-vn]

I think I figured it out after wrestling with it for a few hours. Basically I had to make new ScrollTriggers that pin every group of n cards on top of the screen, alongside those that pin the cards in each group at their respective y coordinates. The math got kind of confusing but luckily I worked my way through it. If anybody asks me to explain the code though,... 🏃‍♂️🏃‍♂️

 

I also made it dynamic so that the number of cards shown at once can be replaced just via the cardCount variable. I don't know if this is the cleanest code (maybe there is a way to make it even more compact), but this does exactly what I want it to do. Thank you @darkus again for the nudge in the right direction 😀 Would still love to see if anybody has a cleaner solution to this problem!

 

See the Pen BaGZGxj by Kiet-Nguyen-the-bashful (@Kiet-Nguyen-the-bashful) on CodePen

[darkus]

5 hours ago, kanguyen-vn said:

I think I figured it out after wrestling with it for a few hours. Basically I had to make new ScrollTriggers that pin every group of n cards on top of the screen, alongside those that pin the cards in each group at their respective y coordinates. The math got kind of confusing but luckily I worked my way through it. If anybody asks me to explain the code though,... 🏃‍♂️🏃‍♂️

 

I also made it dynamic so that the number of cards shown at once can be replaced just via the cardCount variable. I don't know if this is the cleanest code (maybe there is a way to make it even more compact), but this does exactly what I want it to do. Thank you @darkus again for the nudge in the right direction 😀 Would still love to see if anybody has a cleaner solution to this problem!

 

 

 

Nice work, the end result is very cool and reading through your code, what you are doing makes alot of sense.  👍