Reducing motion for Svelte transition
After learning how to obtain a user’s preference for reduced motion, let’s now respect that preference by reducing unnecessary motions in our transitions, which could potentially trigger vestibular discomfort.
In the following code block, there is an example of our Svelte component, which has a fly transition applied to the list items:
<script>
import { fly } from 'svelte/transition';
export let list = [];
</script>
<ul>
{#each list as item}
<li transition:fly={{ x: 40 }}>{item}</li>
{/each}
</ul> In the preceding code, whenever a new item is added to the list, a new <li> element will fly in from the right and be inserted into the list. This flying motion could be a trigger for users with vestibular disorders.
However, the flying transition is not essential because the application will still function...