Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ghostdevv/svelte-reduced-motion
A collection of utilities for working with reduced motion in svelte!
https://github.com/ghostdevv/svelte-reduced-motion
hacktoberfest svelte
Last synced: 11 days ago
JSON representation
A collection of utilities for working with reduced motion in svelte!
- Host: GitHub
- URL: https://github.com/ghostdevv/svelte-reduced-motion
- Owner: ghostdevv
- License: mit
- Created: 2021-12-11T16:35:03.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-22T02:34:54.000Z (17 days ago)
- Last Synced: 2024-10-22T18:24:33.087Z (16 days ago)
- Topics: hacktoberfest, svelte
- Language: TypeScript
- Homepage: https://svelte-reduced-motion.willow.codes
- Size: 232 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Reduced Motion
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-motion/issues/new) if something is missing/wrong.
# Installing
```sh
npm install svelte-reduced-motion -D
```
This library works with Svelte 5 only, [checkout v1](https://www.npmjs.com/package/svelte-reduced-motion/v/1.1.1) for Svelte 3/4 support.
# Usage
Below is some use cases for the library, checkout the [full docs here](https://svelte-reduced-motion.willow.codes).
## 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.
```diff
- import { fly } from 'svelte/transition';
+ import { fly } from 'svelte-reduced-motion/transition';
```
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
import { createTransition } from 'svelte-reduced-motion';
import { fly, blur } from 'svelte/transition';
const accessibleFly = createTransition(fly, blur);
```
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
import { createTransition } from 'svelte-reduced-motion';
import { fly, blur } from 'svelte/transition';
const accessibleFly = createTransition(
[fly, { y: -20, duration: 200 }],
[blur, { duration: 500 }],
);
```
## Store
You can also import the `prefersReducedMotion` store to make checks for yourself.
```svelte
import { prefersReducedMotion } from 'svelte-reduced-motion';
{#if $prefersReducedMotion}
The user prefers reduced motion!
{/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](https://github.com/ghostdevv/svelte-reduced-motion/issues/new)
- Join the [discord](https://discord.gg/2Vd4wAjJnm)