Conditional animation (animate directive/AnimationConfig)

[ghost]

I'm making a list that the user can drag & drop to re-order the items, and the currently selected item's parent moves around to act as a preview of where it will land as the user drags it.

This is done by updating the underlying array, which works nicely with the animate directive - the other items slide around to make room for the placeholder.

The issue is that the currently selected item is still in the list, so it also animates, and slides away from the mouse until the user moves the mouse again (triggering separate drag/drop code set up as an action).

The most flexible solution I can think of would be to return something like null from the animate function to signal that the animation should be disabled:

function slide(node, animation, params) {
	let {item} = params;
	
	if (item === selectedItem) {
		return null;
	}
	
	return flip(node, animation, {
		//...
	});
}

{#each items as item (item)}
	<div animate:slide={{item}}>...</div>
{/each}

I guess this could also be done using an {#if} with one branch where the div has the animate directive and one where it doesn't, but that would be too much deviation from semantic structure/dryness just for the animation, which is just a "nice-to-have" in this case.

[ghost]

Workaround: setting the easing function to return 0 seems to effectively disable the animation:

function slide(node, animation, params) {
	let {item} = params;
	
	if (item === selectedItem) {
		return {
			easing: _ => 0
		};
	}
	
	return flip(node, animation, {
		//...
	});
}

[Conduitry]

This seems adjacent to #2246.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.