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.