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: