An Animation Library for Svelte Apps Based on Framer Motion

An Animation Library for Svelte Apps Based on Framer Motion

Svelte-Motion: Animation Library for Svelte based on Framer Motion

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>

Current Status

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.

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 [email protected]

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.

svelte javascript web-development

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Exposing Most Common Web Development Myths | ByteCipher

Are you looking for the best Web and Mobile App Development Company in India? We at ByteCipher are offering creative & custom web and mobile app development services worldwide

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Web App Development Company | Web Application Development Service

Web development company in India & USA offers different types of web application development services with the best result oriented, clients all specifications, different technologies, etc with a cost-effective rate. Get a free quote.