Works with Svelte 3 & 4!
A collection of utilities for working with reduced motion in svelte! Please create an issue if something is missing/wrong
npm install svelte-reduced-motion -D
Below you can find all of the different exports you can use!
-
If you want to detect & react to reduced motion in Svelte you can use the store
reducedMotion
, for example:<script> import { reducedMotion } from 'svelte-reduced-motion'; </script> <p> Reduced Motion: {$reducedMotion ? 'enabled' : 'disabled'} </p>
-
We ship all the svelte transitions ready to go, they use the same
createTransition
function under the hood! This serves as a drop in replacement for any Svelte Transition and allows you to use accesible transitions without any effort.<script> import { fly } from 'svelte-reduced-motion/transition'; </script> <div transition:fly> I change to fade on devices that prefer-reduced-motion </div>
-
If you want to use a fallback of something other than
fade
or need more control, this method is for you.createTransition(base, fallback)
<script> import { createTransition } from 'svelte-reduced-motion'; import { fly } from 'svelte/transition'; const accessibleTransition = createTransition(fly); </script> <!-- You can even specify the options as usual--> <div transition:accessibleTransition={{ y: -20 }}> Hello world </div>
No problem, here are a few examples
const accessibleTransition = createTransition( [fly, { duration: 1000 }], [fade, { duration: 200 }] ); const accessibleTransition = createTransition( [fly, { duration: 750, y: -20 }], fade );