Svelte Motion

Svelte Motion is an open-source animation library for Svelte that ports the framer-motion API into Svelte's action system, letting you animate HTML and SVG elements by attaching a use:motion action within a <Motion> component. The library is distributed as the npm package svelte-motion, installable with npm install --save-dev svelte-motion, and its GitHub repository has around 661 stars. A project page at svelte-motion.gradientdescent.de hosts installation and usage documentation.

What is Svelte Motion?

Svelte Motion is a Svelte animation library based on framer-motion. Instead of wrapping elements in motion components like framer-motion's MotionDiv, Svelte Motion provides a Motion component that exposes a motion action through a slot prop; you apply that action to any HTML element with use:motion, or to SVG elements such as g, path, and circle when the isSVG prop is set. The library takes a Svelte component with a <Motion let:motion> wrapper as its main input and produces declarative animation behavior attached directly to the target element.

Key Features

• Framer-motion-style API — The usage pattern mirrors framer-motion's component model (MotionDiv becomes <Motion let:motion> with use:motion), making it approachable for developers coming from React.
• Action-based integration — Animations are applied via Svelte's use:motion action directive, so no wrapper element is injected into the DOM.
• SVG element support — The isSVG boolean prop allows the same action to animate SVG nodes like g, path, and circle, covering chart and icon use cases.
• Single-command installation — Install as a dev dependency with npm install --save-dev svelte-motion.
• Slot-prop design — The let:motion slot prop hands the action to the consumer, which can then be placed on any HTML or SVG element inside the wrapper.
• Dedicated documentation site — The project page provides usage examples for both HTML and SVG scenarios.

Who is it for?

• Svelte developers who want declarative, component-driven animations without writing imperative JavaScript or integrating a React-centric library.
• Developers migrating from React who already know framer-motion and want a similar mental model in Svelte, with a nearly one-to-one mapping of concepts.
• Component library authors who need a reusable animation primitive to build into their own Svelte components.
• Data visualization builders who work with SVG elements and need a straightforward way to animate paths, circles, and groups.

What can you do with Svelte Motion?

• Animate HTML elements: Wrap any div, span, or other HTML tag in <Motion let:motion> and apply use:motion to attach frame-by-frame animation behavior.
• Animate SVG graphics: Add isSVG to the Motion component to animate g, path, and circle elements, enabling dynamic charts, icons, and illustrations.
• Port framer-motion patterns to Svelte: Translate React code that uses MotionDiv into Svelte syntax using the <Motion> component and the use:motion action, preserving the same conceptual structure.

How does Svelte Motion work?

Install the package with npm install --save-dev svelte-motion, then in a .svelte file import the Motion component. Wrap your target element in <Motion let:motion>, and apply the motion action to that element using use:motion. For SVG elements, set the isSVG prop on the Motion component. The action then drives animations according to the props given, following the framer-motion-inspired model described in the documentation.

FAQ

How do I install Svelte Motion?

Run npm install --save-dev svelte-motion inside your Svelte project. The package is added to the dev dependencies, and you can then import Motion from 'svelte-motion' in any component.

How do I animate an HTML element with Svelte Motion?

Import Motion, wrap your element with <Motion let:motion>, and attach the motion action to the element with use:motion. For example, <Motion let:motion><div use:motion/></Motion>.

Does Svelte Motion support SVG elements?

Yes. Set the isSVG prop on the Motion component, as in <Motion let:motion isSVG>, and then apply use:motion to SVG elements like g, path, or circle inside it.

What is the relationship between Svelte Motion and framer-motion?

Svelte Motion is an animation library for Svelte based on framer-motion, meaning it aims to recreate the API and concepts of framer-motion for Svelte projects. It uses Svelte's action system rather than React components.