Svelte Reduced Motion

A 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.

Installing

npm install svelte-reduced-motion -D

This library works with Svelte 5 only, checkout v1 for Svelte 3/4 support.

Usage

Below is some use cases for the library, checkout the full docs here.

Transitions

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.

<script>
-    import { fly } from 'svelte/transition';
+    import { fly } from 'svelte-reduced-motion/transition';
</script>

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.

<script>
    import { createTransition } from 'svelte-reduced-motion';
    import { fly, blur } from 'svelte/transition';

    const accessibleFly = createTransition(fly, blur);
</script>

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.

<script>
    import { createTransition } from 'svelte-reduced-motion';
    import { fly, blur } from 'svelte/transition';

    const accessibleFly = createTransition(
        [fly, { y: -20, duration: 200 }],
        [blur, { duration: 500 }],
    );
</script>

<div use:accessibleFly></div>

Store

You can also import the prefersReducedMotion store to make checks for yourself.

<script>
    import { prefersReducedMotion } from 'svelte-reduced-motion';
</script>

{#if $prefersReducedMotion}
    <p>The user prefers reduced motion!</p>
{/if}

Migrating from v1 to v2

• Requires Svelte 5
• The reducedMotion store is now called prefersReducedMotion to match the media query
• The types have been tweaked to be more compatible, please let me know if there any issues.

Support

• Create a issue on the github
• Join the discord