Svelte 5: flip reordering causes duplication and glitches

[brunnerh]

Describe the bug

Using animate:flip in an #each and completely reordering the list causes duplicated items and a broken animation (elements leaving the bounds of the list and such).

When moving one item to the other end of the list at a time, the animation disappears after having moved all of them. Also, only one item is animated even though all items have to move and thus should be animated.

Not sure how this relates to #9655, which also uses transitions. If this is just a special case, feel free to close this as duplicate.

Reproduction

Svelte 4
Svelte 5

---

Tried a more simple example where one item gets moved from start of list to the end:

<script>
	import { flip } from 'svelte/animate';

	let items = Array.from({ length: 5 }, (_, i) => ({ id: i, text: `Item ${i+1}` }))

	function update() {
		const [first, ...rest] = items;
		items = [...rest, first];
	}
</script>

<button on:click={update}>Shift</button>
<div class="list">
	{#each items as item (item.id)}
		<div animate:flip>{item.text}</div>
	{/each}
</div>

REPL

Here the animation disappears after cycling through the list once.

Logs

No response

System Info

REPL - Svelte v5.0.0-next.19

Severity

annoyance

[brunnerh]

@trueadm The duplications are gone, but the animation seems to still be off.
Compare:
Svelte 5 (preview of PR)
Svelte 4

(Or is there another fix for that which is not included here?)

[trueadm]

I'm working on another PR for the animation bug. I was more addressing the duplicated content.

[brunnerh]

@trueadm #9917 seems to mostly clean up the issue, but there can still be oddities when animations overlap.

Recorded a clip where I use Enter and its re-fire rate to provoke the issue (which does not happen in v4):

each-flip-glitches.webm

[trueadm]

@brunnerh Unfortunately, the current system for reconciling each blocks doesn't try to reverse previous transitions. I couldn't make it work this way with signals and how various parts of the reconciliation system work. So you'll see slightly glitchy behavior right now doing what you do. I'm unsure if this will ever be something we can solve.

[hakoomen]

I want to reopen this issue, the animation glitch is still there (see the REPLs in the issue).