Carousel slow to load + animation not applying to box boxes

I’m facing 2 issues with my carousel that I’m trying to implement.

Issue #1
The 2nd row carousel is slow to load and after a while some of the profile cards don’t show up unless you hover over where they’re meant to be, but by that point the user might think it’s a bug.

How can I make sure the cards load seamless when they scroll horizontally by themselves?

Issue #2
I’m trying to do an animation sequence where when you hover on the card it:

(1) Makes the profile picture change from B/W to colour (filter: saturation is going from 0% → 100%)
(2) Makes the hover-gradient-background div show up (opacity is going from 0% → 100%)

And then when the user hovers out, the reverse happens so it reverts to zero saturation and no gradient background.

But the issue I keep running into is that the animation doesn’t apply to the 2nd row (the 2nd row is it’s own CMS so that is can animate in the opposite direction as the first one)

Initially I used the same animation and applied it to the carousel-members-dp and the hover-gradient-background just for the #2 row → so the animation sequence was changing 4 items at a time. But it didn’t work?

So then I tried making the dp on row #2 into a different class, but that also didn’t work?

I’m really not why it’s not having an animation sequence. :frowning:

Any help would be really appreciated!

Here is my site Read-Only: (Webflow - Next Chapter New Brand)