Low quality animation example

[KevinDoughty]

Describe the bug

The animation example at https://svelte.dev/examples/animate is of low quality and fails on double and triple click. Personally, I think non-additive FLIP is bollocks and a bigger problem, but I'm not going to tell you how to animate like I tried to tell Apple and the W3C.

Reproduction

Click rapidly, as seen in the following video: https://x.com/KvnDy/status/1805192958259433800 https://fosstodon.org/@kvndy/112671224307964439

Logs

No response

System Info

The video was recorded using Brave browser but I don’t think it matters.

Severity

annoyance

[KevinDoughty]

Also happens using Firefox

[7nik]

Steps to reproduce:

1. add duration: 3000 to the animations;
2. click any element to start the animation;
3. click the flying element again.

After a lot of clicking, I got this as the final state of elements:

However, I wonder how often it happens in real life.

[KevinDoughty]

If it’s good enough for Svelte, fine. I intend to animate on key events or incoming data and will be forced to seek alternative techniques.

[KevinDoughty]

However, I wonder how often it happens in real life.

Ship it!

[khromov]

A possible workaround could be to add pointer-events:none; during the transition, which should prevent the box from being clickable during animation.

[Prinzhorn]

https://github.com/sveltejs/svelte/issues/6562

[KevinDoughty]

Dupe, closing in favor of https://github.com/sveltejs/svelte/issues/6562