Introduction

Motion Start is a declarative animation library for Svelte 5, built as a port of Framer Motion 11.11.11. You describe the state you want an element to be in and Motion Start works out how to get there — including layout changes, gestures, scroll, and enter/exit animations.

Every animation above is just a prop:

		<script>
	import { motion } from "motion-start";
</script>
 
<motion.div
	whileHover={{ scale: 1.12 }}
	whileTap={{ scale: 0.92 }}
	transition={{ type: "spring", stiffness: 400, damping: 20 }}
/>
	

What's new in 0.2

0.2.0-next.0 is a rewrite against framer-motion@11.11.11 (previously 4.0.3) on Svelte 5 runes.

New

• Reorder.Group / Reorder.Item for drag-to-reorder lists.
• LayoutGroup and the full projection engine, replacing AnimateSharedLayout.
• AnimatePresence mode (sync | wait | popLayout) and usePresenceData.
• WAAPI-accelerated animations, animate() sequences, and stagger().
• Scroll (useScroll), viewport (whileInView) and useInView support.
• Motion value hooks: useTime, useVelocity, useWillChange, useAnimate, useAnimateMini.
• Subpath entries: motion-start/dom, /mini, /m, /client, /projection.

Changed

• Components and hooks are runes-based; the renderless Use*.svelte wrappers are gone in favour of plain functions and classes.
• motion and m are proxies, so any element is available as motion.<tag>.
• Gestures are rewritten onto the shared Feature pipeline (hover, press, pan, drag, focus).

Removed

• AnimateSharedLayout — use LayoutGroup with layoutId.
• MotionDiv — use motion.div.

Explore