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 { 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>

MotionDiv

For quick start you can also pull the MotionDiv (or quicker Mdiv) component, which works like a motion.div:

<script>
    import {MotionDiv} from 'svelte-motion'
</script>

<MotionDiv animate={{x:100}}>
    <h1>Hello World!</h1>
</MotionDiv>

The source code of the MotionDiv component looks like this (you can also look in ‘svelte-motion/src/components/MotionDiv.svelte’):

<script>
    import Motion from "../motion/MotionSSR.svelte";
    export let div = {};
</script>

<Motion {...$$restProps} let:motion let:props>
	<div {...props} {...div} use:motion><slot/></div>
</Motion>

As you can see it is just wrapping a div with a Motion component. If you pass an object into the div prop, only the div element will receive it. All other props are passed to the Motion component. Via slot props it passes a subset of the props down to the div.

If you think you need several MotionH1s or MotionButtons or a different tag, I encourage you to use the pattern above to generate them yourself in your project.

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.