Svelte Reduced Motion

Usage

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>

We can still specify options as usual, but they will be applied to both the target and fallback transition.

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

<div use:fly={{ y: -20, duration: 200 }}></div>

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>

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}