svelte-motion Svelte Themes

Svelte Motion

Experimental web animations support for Svelte transitions

svelte-motion

Experimental web animations support for Svelte transitions, powered by Motion.

Not an npm package yet

Try it out

https://svelte-motion.netlify.app

And read the code.

Usage

Use with normal Svelte transitions. No API change!

<script>
  import { fade } from '$lib'
</script>

{#if visible}
  <div transition:fade />
{/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

Top categories

Loading Svelte Themes