Motion for Svelte

Motion (formerly Framer Motion) for Svelte 5: animations, gestures, layout and exit animations, scroll and motion values, built on the same engine as Motion for React and Vue.

Documentation

Read the docs at motion.hyprsonic.dev. The site's in docs/; run it locally with bun install and bun run docs.

Quick Start

npm install motion-sv

Then import the motion component:

<script lang="ts">
	import { motion } from "motion-sv";
</script>

<motion.div animate={{ x: 100 }}>Hello</motion.div>

Built with motion-sv

• Svelte Animations: 90+ free, open-source animated components and effects.

Svelte Playground Examples

• Directional Nav

• Animated Tabs

• Drag Direction Locking

• Drag to transform

• Svg Path Morphing

• Animated List

• Image Gallery

Key Differences from Motion for React and Vue

Most of the API is identical. The main differences:

• Layout animations need to know which state the layout depends on, because Svelte has no hook that runs before the DOM updates. Render the elements through a namespace from createLayoutMotion(), with a getter for that state, or call its update() with the state change. Shared layout animations with layoutId, exits in AnimatePresence and Reorder lists work without it.

  <script lang="ts">
  	import { createLayoutMotion } from "motion-sv";
  
  	let isOn = $state(false);
  	const layout = createLayoutMotion(() => isOn);
  </script>
  
  <button class={{ on: isOn }} onclick={() => (isOn = !isOn)}>
  	<layout.div class="handle" />
  </button>

• AnimatePresence works with Svelte's {#if}, {#each} and {#key} blocks.

• Props: whilePress instead of whileTap, inViewOptions instead of viewport, and bind:ref for the element.

• Hooks take getters for inputs that change, like elements bound after setup: useScroll(() => ({ target: el })).

The documentation covers all of these in detail.