Skip to main content

Getting Started

Install Motion Start and write your first animation.

Requirements

Motion Start requires Svelte 5. Runes are used throughout the library, so a Svelte 4 project will need to migrate first.

Install

		npm install motion-start

While the rewrite is in alpha, install the next tag explicitly:

		npm install motion-start@next

Import

Everything is exported from the package root:

		import { motion, AnimatePresence, useMotionValue } from "motion-start";

Smaller entry points are available when you only need part of the library:

Entry Contents
motion-start Everything — components, hooks, values, projection.
motion-start/m The m component only, for use with LazyMotion.
motion-start/dom The imperative DOM API — animate, scroll, inView.
motion-start/mini The mini animation API, backed by WAAPI.
motion-start/dom/mini The mini DOM API.
motion-start/projection The projection engine, for advanced layout work.

Your first animation

Any HTML or SVG element is available on the motion proxy. Give it an animate prop and it will animate to that state whenever the values change.

		<script>
	import { motion } from "motion-start";
</script>
 
<motion.div
	initial={{ opacity: 0, y: 20 }}
	animate={{ opacity: 1, y: 0 }}
	transition={{ type: "spring", stiffness: 300, damping: 24 }}
/>
  • initial — the state the element mounts in.
  • animate — the state to animate towards.
  • transition — how to get there.

Animating elements out

Svelte removes elements from the DOM immediately, so exit animations need AnimatePresence to keep them alive until the animation finishes.

hello
		<script>
	import { motion, AnimatePresence } from "motion-start";
 
	let visible = $state(true);
</script>
 
<AnimatePresence>
	{#if visible}
		<motion.div
			initial={{ opacity: 0, scale: 0.6 }}
			animate={{ opacity: 1, scale: 1 }}
			exit={{ opacity: 0, scale: 0.6 }}
		/>
	{/if}
</AnimatePresence>

Next steps