animate directive with duration:0 should be completely disabled / Programmatically disable animate directive

[JuanDouek]

Describe the problem

When using animate directive I want to be able to programmatically disable it.
Using duration:0 or even swapping the animate function with an empty one does not completely disable it:

import { flip } from 'svelte/animate';
$: Flip = animate? flip : () => { return {}}; // tried with null / undefined with no luck

You can see in the video that, when using these strategies, there is still something going on that produces a jump when scrolling.

svelte.animate.mov

Describe the proposed solution

Completely disable animate directive when there is no animation to play.

Alternatives considered

Allow animate:null or animate:undefined

Importance

nice to have

[geoffrich]

Here's one way to disable the flip animation: REPL

Essentially, you toggle between the imported flip function and a dummy function that returns an object with a no-op CSS animation.

<script>
	import { flip } from 'svelte/animate';
	
	let items = [`item ${0}`];
	let idx = 1;
	let shouldFlip = true;
	
	function removeItem(idx) {
		items.splice(idx, 1);
		items = items;
	}
	
	$: flipFn = shouldFlip ? flip : () => ({ css: () => ''});
</script>

<label><input type="checkbox" bind:checked={shouldFlip}> Use flip?</label>
<button on:click={() => items = [...items, `item ${idx++}`]}>
	Add item
</button>

{#each items as item, idx (item)}
<p animate:flipFn>
	{item}
	<button on:click={() => removeItem(idx)}>
		Remove
	</button>
</p>
{/each}

[JuanDouek]

Thanks for your answer, but unfortunately, it didn't work in my case.
There is no animation, of course, but when scrolling, it still jumps back.
If I completely remove the animate directive, it doesn't jump back.
There is still something going on in the background.

[geoffrich]

Can you provide a REPL or minimal reproduction reproducing the issue?

[JuanDouek]

Here you have: REPL
The red list in the right is the one with animate disabled.
The green list has no animate directive.

The lags/jumps are more noticeable in Safari than in Chrome and when scrolling from bottom to top.
In Safari, try both using the scrollbar, there should be a difference.
Using the mouse wheel from the bottom sometimes it breaks and I can't go up, I have to grab the scrollbar.

[dummdidumm]

Closing in favor of #6942 - it would solve this by supporting switching out the directive with a falsy value so that it is disabled. Also this might have been fixed with Svelte 5