https://github.com/bluwy/svelte-motion
Experimental web animations support for Svelte transitions
https://github.com/bluwy/svelte-motion
svelte transition web-animations-api
Last synced: about 1 year ago
JSON representation
Experimental web animations support for Svelte transitions
- Host: GitHub
- URL: https://github.com/bluwy/svelte-motion
- Owner: bluwy
- Created: 2021-10-04T17:16:39.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T07:17:22.000Z (almost 3 years ago)
- Last Synced: 2025-03-31T08:43:24.364Z (about 1 year ago)
- Topics: svelte, transition, web-animations-api
- Language: Svelte
- Homepage: https://svelte-motion.netlify.app/
- Size: 46.9 KB
- Stars: 15
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-motion
Experimental [web animations](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) support for Svelte transitions, powered by [Motion](https://motion.dev/).
> Not an npm package yet
## Try it out
https://svelte-motion.netlify.app
And read [the code](src/lib).
## Usage
Use with normal Svelte transitions. No API change!
```svelte
import { fade } from '$lib'
{#if visible}
{/if}
```
## Limitations
- No elastic and bounce easing. Web animations don't support those, so they require dynamic keyframe generation, similar to how Svelte's CSS transition work. Not implemented yet.
- No custom easing functions. Use CSS easing functions instead.
## License
MIT