You can set if it’s reduced motion in Chrome easily by opening dev tools, pressing the three dots in the top right, then going on more tools > rendering and finding the “Emulate css media feature prefers reduced motion”
Reduced Motion: false
Code for demo above:
<script>
import { reducedMotion, createTransition } from 'svelte-reduced-motion';
import { fly } from 'svelte/transition';
let showing;
const accessibleTransition = createTransition(fly);
</script>
<p>
Reduced Motion: {$reducedMotion}
</p>
<button on:click={() => (showing = !showing)}> Toggle Animation </button>
{#if showing}
<div
transition:accessibleTransition={{ y: -20 }}
style="padding: 16px 0px;">
Hello World
</div>
{/if}
You can also simplify this by using the prebuilt transitions:
<script>
import { fly } from 'svelte-reduced-motion/transition';
let showing;
</script>
<button on:click={() => (showing = !showing)}> Toggle Animation </button>
{#if showing}
<div
transition:fly={{ y: -20 }}
style="padding: 16px 0px;">
Hello World
</div>
{/if}