Jordan Castiel

This is definitely an improvement, thank you! Just had a look and it's progress in the right direction, it solves the problem of keeping the active card enlarged and synced with the duration of the timeline, I also tried to target the middle element but I wasn't successful.

Hey Zach, I made some updates to narrow down the unknowns and responded to all questions in my previous quoted reply. Thank you, I would really appreciate some help

Yeah, I get that. I just made some updates to the demo so it's a lot closer to the real thing at this moment. Please, put the pen at 0.5x so it doesn't scroll The cards are being moved using a timeline like in the demo. First, the list of cards is cloned, then the actual cards (not the cloned set) are animated by updating its y position, then the cloned list is inserted directly underneath to give the illusion of an infinite automatic scroll... it's an unending loop. There are a finite number of cards, it's just duplicated twice and one is moved ahead of the other, then repositioned under to make an upward moving loop. There is a container with an overflow of hidden holding all cards, I only care about the middle point of this container, in the demo, i just added a text to show what the middle point is. I am trying to do something (expand) with any card that's in that middle range at any given time. Thank you.

Whao, thanks for the swift response, Zach. I'm so sorry for the title, I'm going to edit it right after this! About this question, I've searched the forum but haven't found something that works for me. I do not need the cards to start scrolling on drag or when there's been a scroll into the viewport. It should start scrolling vertically, and infinitely on page load as it currently does. Where my problem is... I want to always know the card that's positioned in the middle of the containing box so I either add styles or update the props... Like, I always want one active card Please, I need your help

Hi guys! This is my first post ever, I'm new to GSAP and I'm soooooooooo stuck, I need your help I'm creating a series of cards (length varies) that scroll vertically and infinitely, I've been able to achieve that, however, at every point, there should be an active card that appears expanded than the rest and that card is usually the one that's positioned at the middle of the view port... That is, as the cards scroll up vertically, whichever card is at the vertical middle should expand and once it's gone above the middle section of the viewport, the card below it should now become expanded, and so on... so, at any given time, a card should be in focus... I'm VERY new to GSAP and this has kicked my ass for about a month, Please I'd appreciate some help here, Thanks Also, please let me know if my code can be improved... BTW, this is how the expanded card looks in motion: Note: I must also mention that, the way I have this implemented in my actual code (Gatsby application), each card gets a prop - active - and whenever active is set to true, the classes that cause the expansion are applied... So, a solution that would work out of the box for me is one that updates the state of a particular card whenever it's in the viewport... so, something that checks and updates the prop of the card... if this isn't good for performance I'm ready to stick with whatever works... Thanks so much: