A library for working with reduced motion and Svelte transitions. Read more about [why reduced motion is important](https://ghostdev.xyz/posts/working-with-reduced-motion-in-svelte/). Please [create an issue](https://github.com/ghostdevv/svelte-reduced-mo
npm install svelte-reduced-motionA library for working with reduced motion and Svelte transitions. Read more about why reduced motion is important. Please create an issue if something is missing/wrong.
``sh`
npm install svelte-reduced-motion -D
This library works with Svelte 5 only, checkout v1 for Svelte 3/4 support.
Below is some use cases for the library, checkout the full docs here.
The easiest way to get started is with the svelte/transition wrapper. This wraps all official transitions with our createTransition api, which will automatically use fade when reduced motion is requested.
`diff`
You can provide your own fallback transition with the createTransition api. We'll import the regular fly and blur transitions for this. The first argument is the target transition, with the second being the fallback.
`svelte`
If we want to specify options per transition, you can do that in the createTransition fn. Any options passed to the final transition will overwrite them, and still cause a merge.
`svelte
Store
You can also import the
store to make checks for yourself.`svelte
{#if $prefersReducedMotion}
The user prefers reduced motion!
{/if}
`Migrating from v1 to v2
- Requires Svelte 5
- The
store is now called prefersReducedMotion` to match the media query