Having alternative transitions for inaccessible users

Users with vestibular disorders may feel discomfort when exposed to motion-based animations, such as scaling or panning large objects. However, they are generally less affected by subtler animations, such as fading.

Switching all transitions to fading for users with vestibular disorders is not a one-size-fits-all solution. It is always better to seek feedback from the users themselves.

We will continue using the same example from the previous section and explore how we can switch from the fly transition to a fade transition when a user prefers reduced motion.

One thing to note is that, in Svelte, you are not allowed to apply more than one transition to an element.

For example, the following code is invalid and will result in a build error:

<div transition:fade transition:fly />

This means we can’t apply two transitions to an element and then decide which one to use. We must find a way to switch between...