Svelte 5: animate:flip can cause transition glitches and overlapping on outro

[brunnerh]

Describe the bug

When using transitions like fly in combination with the flip animation, the transitions can be adversely affected.

• When multiple transitions are activated at the same time, previous transitions can stutter and end up transitioning to the wrong location. After the transitions has finished the elements will snap into the correct place, however.
• Adjacent elements that transition out at the same time, will collapse into the same position and outro from there. E.g. three items will all outro from the position of the first item. (This issue already exists in Svelte 4, though.)

Reproduction

Code

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

	let items = $state([]);
	let i = $state(0);
	const add = () => items.push(i++, i++, i++, i++);
	const del = () => items = items.filter(i => i % 4 == 0);
	const options = {
		x: 200,
		duration: 1000,
	};

	add();add();add();
</script>

<button onclick={add}>Add</button>
<button onclick={del}>Delete Some</button>
<button onclick={() => items = []}>Delete All</button>

<div class="grid">
	<div>
		<h2>Without FLIP</h2>
		{#each items as i (i)}
			<div transition:fly={options}>{i}</div>
		{/each}
	</div>
	<div>
		<h2>With FLIP</h2>
		{#each items as i (i)}
			<div transition:fly={options} animate:flip>{i}</div>
		{/each}
	</div>
</div>

<style>
	:global(html) { overflow: clip; }
	.grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
</style>

Svelte 4
Svelte 5

• For the intro transition issues, click "Add" several times in quick succession, so other items are still transitioning while adding new ones. This issue does not appear to happen in Svelte 4.
• For the outro transition overlapping, use one of the delete actions. The button that only deletes some items shows how items collapse into groups. This should also happen in Svelte 4.

Logs

No response

System Info

REPL - Svelte v5.0.0-next.37
Chrome and Firefox

Severity

annoyance

[trueadm]

I'm doing to need some help with this one. I have no idea why it's happening.

[trueadm]

Adding this seems to fix one of the issues but I'm not sure if it's the correct solution here. Hmm.

[brunnerh]

I suspect that due to the already running transition, the calculated target position is off.
Ideally it should not do anything, if the element position within the list did not change.
And if it did change position, the animations would likely need to be cancelled before doing all the layout calculations.

[speiffer829]

oh man I've been waiting for this one to get addressed. its really apparent if you have a grid of cards and scale out some of them with FLIP they all just stack at the top left to transition out. I will be following this. I will actaully add to it and say this was an issue in Svelte 4 as well but not 3. Here is an example with svelte 4. You will notice if you switch between a specific hero type and "all" the heros being removed will stack in the top left corner of the grid. Hope that helps in some way.

[trueadm]

This seems to be fixed now.

[brunnerh]

flip does not do what it is supposed to do, though.
Do we need a separate issue for that?
(There are still a few open ones in the area of transitions/animations.)

[trueadm]

flip does not do what it is supposed to do, though.

Yeah sorry, I missed that.

[brunnerh]

#11208 fixes FLIP, but now stuff overlaps again on outro (i.e. it is as broken as it was in v4).

• Adjacent elements that transition out at the same time, will collapse into the same position and outro from there. E.g. three items will all outro from the position of the first item. (This issue already exists in Svelte 4, though.)