I'm trying to recreate an animation with GSAP in Next.js, where the WhoWeInvestIn container remains sticky when scrolled into view. As the user continues scrolling:

The scattered cards on each side animate towards their respective sides, leaving 30% of each card visible. Once this animation completes, green cards slide into view one by one, stacking on top of each other until the last card is fully visible. Can this be achieved with GSAP and Next.js? If so, what would be the best approach to structure this animation? If not, how best should i approach this?

I've attempted manually controlling the x and y postions depending on the height of WhoWeInvestIn container but the animation becomes too fast and visually unappealing

A sample can be seen here: /