An animation library for Svelte-Apps based on Framer Motion.
Install Svelte Motion via:
npm install --save-dev svelte-motion
Corresponding to a motion.div
in framer-motion is this:
import { Motion } from 'svelte-motion'
<Motion let:motion><div use:motion/></Motion>
For svg elements like ‘g’, ‘path’ or ‘circle’, use:
<Motion let:motion isSVG><g use:motion/></Motion>
Svelte Motion is in beta version. Some parts of the syntax may change. Not all features are shown on this page, yet, even though they might work. If you know a feature from framer-motion, which you don’t see here, feel free to try out, if it works. If you find bugs, leave an issue report on github.
See the Roadmap for more information.
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 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!
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.
Svelte Motion is MIT licensed.
#svelte #javascript #web-development