Animation in cascade

Hello,

I want to apply an animation in cascade on each mpa-game.

<mpa-infinite-scroll data="games">
    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <mpa-game
            v-for="(game, index) in props.games.data"
            :key="'game-'+game.id"
            :game="game"
            @click="show(game.id)"
            class="animate-fade-up"
        ></mpa-game>
    </div>
</mpa-infinite-scroll>

I have tried by adding :style="{ animationDelay: `${index * 100}ms` }" but it interfers with <InfiniteScroll> from InertiaJS and some games don't appear on the screen.

So when new games appear on the screen, I want them to appear with the animation.

Any idea how I can do that ?

Thanks for your help.

V