Svelte Motion

An animation library for Svelte-Apps based on Framer Motion.

Getting started

Install Svelte Motion via:

npm install --save-dev svelte-motion

Usage

Corresponding to a motion.div in framer-motion is this:

import { M } from 'svelte-motion'

<M.div>

Current Status

Svelte Motion is in beta version. Some parts of the syntax may change. If you find bugs, leave an issue report on github.

See the Roadmap for more information.

Troubleshooting

Svelte-motion works in ‘normal’ Svelte Apps as well as in an SSR environment, as you can see on this page. The page is made with Sapper.

SvelteKit

SvelteKit is in public beta stage and compatibility may not be 100%. I try to gather information on how component libraries should be designed, but currently it seems to involve a lot of trial and error. So far it seemed like SvelteKit would only accept direct imports of ‘.svelte’ files, when called as a SSR component. Try:

import Motion from 'svelte-motion/src/motion/MotionSSR.svelte'

I was able to compile and run (with static adapter), but dev-mode threw errors. I’ll look into it more when time permits, help is welcome!

Build errors

If you get an error with terser like ‘unexpected token punc’, you can update rollup-plugin-terser to a newer version:

npm install --save-dev rollup-plugin-terser@latest

Rollup issues like ‘process is undefined’ should be fixed. If it still happens post an issue at github. You could also try to add rollup-plugin-inject-process-env or a similar plugin.

License

Svelte Motion is MIT licensed.