FIG-001 · MASTHEAD

// compare / svelte-motion vs motion-one

vsmotion one.

Motion One is the imperative engine. Svelte Motion is the declarative layer on top.

FIG-001

SHEET 01 / 07

FIG-002 / OVERVIEW

at a glance.

motion (formerly Motion One, now branded motion.dev) is a framework-agnostic, imperative animation engine. @humanspeak/svelte-motion is the declarative Svelte 5 component API built on top of it. We re-export Motion's imperative helpers so you do not need a second dependency.

FIG-003 / FEATURE MATRIX

side-by-side.

Every surface that matters, compared without spin.

feature	@humanspeak/svelte-motion	Motion One
animate(el, keyframes, opts)	Re-exported	yes
Framework-specific component layer	Yes (Svelte 5)	no
motion.<tag> declarative proxies	~170 tags	no
AnimatePresence exit animations	yes	no
whileHover / whileTap / whileFocus Motion ships imperative hover() / press() helpers; the whileX prop pattern lives in the Svelte layer.	yes	no
whileInView Motion has an imperative inView() helper; Svelte Motion exposes it as a whileInView prop.	yes	inView() helper
Drag (constraints / momentum / elastic)	yes	no
FLIP layout animation (layout prop)	yes	no
Shared layoutId animation	yes	no
Variants with propagation	yes	no
Spring physics	yes	yes
Scroll-linked motion values	useScroll + useTransform	scroll()
Reactive motion values (useMotionValue)	yes	no
MotionConfig provider	yes	no
Framework	Svelte 5	Framework-agnostic
Engine	Built on motion	motion (self)

FIG-004 / STRENGTHS

where each shines.

▣ svelte motion 14

+Svelte 5 runes-native — built for runes, not retrofitted
+Framer Motion-compatible API for component code (props, semantics, AnimatePresence, variants)
+~170 motion.<tag> proxy components covering every HTML and SVG element
+Full gesture set: whileHover, whileTap, whileFocus, whileInView
+Drag gesture with constraints, momentum, elastic, snap-to-origin, axis lock
+FLIP layout animation and shared layoutId out of the box
+Spring physics, scroll-linked motion values, and reactive useMotionValue / useTransform
+SSR-safe by default — initial state renders server-side, hydrates without flicker
+Tree-shakeable Motion<Tag> named exports for bundle-size-critical apps
+TypeScript-first with full type safety across motion props, drag, variants, and hooks
+MIT licensed — no commercial tier, no paid plugin gates
+Declarative prop-based API — set props, framework reconciles
+Component lifecycle, gesture state, and presence handled automatically
+Re-exports motion's imperative API — no second dependency needed for one-shot effects

▢ motion one 5

+Framework-agnostic — works in vanilla JS, Web Components, any framework
+Tiny imperative core — minimal bundle if you only need a few effects
+Best fit for ad-hoc, fire-and-forget effects from event handlers
+Maintained by the original Framer Motion team
+Direct timeline / chain composition without component overhead

FIG-005 / LIMITATIONS

where each falls short.

▣ svelte motion 3

−Requires Svelte 5 + runes (no Svelte 4 / legacy stores support)
−Newer project — smaller community than the React Framer Motion ecosystem
−transition.staggerChildren orchestrator not yet wired — drive cascades with per-child delay

▢ motion one 5

−No declarative component layer — you wire DOM refs and lifecycle yourself
−No AnimatePresence — exit animations require manual unmount delay
−No drag with constraints / momentum / elastic out of the box
−No FLIP layout or shared layoutId animation
−No reactive motion values — you manage subscriptions manually

FIG-006 / VERDICT

the honest call.

These are layers of the same stack, not competitors. Reach for motion / motion.dev for vanilla-JS projects or one-shot imperative effects. Reach for @humanspeak/svelte-motion when you are building Svelte 5 components that need declarative animation, gestures, AnimatePresence, drag, or layout — the same engine runs underneath, with the Svelte component model on top.

FIG-007 / MORE