Animation doesn't play on last item in a list

Question

I am trying to create a component which changes it's content every n seconds (example 5 seconds) - I generally need some animations like

1. background fades in
2. Then the content slides in from right
3. Hold
4. Content slides out to the left
5. Background fades out

Then second component would do the same until we reach the last component and loop back from the first item in the list.

I am facing 2 issues, it would be really helpful if someone can help me on this.

1. On the last item the transitions don't play (the background doesn't fade out - it just disappears leaving a blank screen for the animation time and then the first animation starts)

2. I want to have a overlap of fadeout of current item and fadein of next item - so that there won't be any empty place.

I have created a quick replication of both the issues in the - https://svelte.dev/repl/d5ec1e240e0d497287c8610002df7494?version=3.42.1

Things to observe in the repl

1. When the index is at 3 (last item) - the item is removed with no effects
2. There is no overlap of the images - even though I gave an overlapping delay

Answer 1

Is not that the last item doesn't run the animation, but the last item being pushed offscreen by the first. You're seeing index 0, but since the IN animation has a delay, you see blank for the duration of the delay.

In your code of ProfleCard.svelte, set the height of the image to a small value so you can see the mechanics happening:

<img src={coverImageUrl} alt={name} style="max-height: 50px;" />

The Mechanics

As long as the current index grows, you'll see the next image being generated below the current image. However, when the current index gets reset, this happens the other way around: The current image goes down, and the new image is created on top. Is not that animations don't run for the last element: The animation runs, but off-screen due to image sizes.

The Root Cause

This happens because of the way you create your items inside the {#each} loop. Because the loop runs in order, when the current index is reset, the "next" item is really before the current item.

A better way of doing it would be using {#key}:

{#key currentIndex}
<a
    class="relative"
    href={profiles[currentIndex].link}
>
    <ProfileCard
        coverImageUrl={profiles[currentIndex].cover_image_url}
        name={profiles[currentIndex].name}
        index={currentIndex}
    />
</a>
{/key}

Answer 2

What @josé-ramírez mentioned is correct and here is the solution which also solves the need for overlap of transitions (just add absolute) https://svelte.dev/repl/558624e2d1094d8d95daaee497ccecf4?version=3.42.1