# Svelte Motion vs Motion One Motion One is the imperative engine. Svelte Motion is the declarative layer on top. ## Overview 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. - **Svelte Motion site:** https://motion.svelte.page - **Svelte Motion npm:** https://www.npmjs.com/package/%40humanspeak%2Fsvelte-motion - **Svelte Motion slug:** svelte-motion - **Category:** Imperative animation engine - **Approach:** Framework-agnostic, function-call API - **Website:** https://motion.dev - **GitHub:** https://github.com/motiondivision/motion - **npm:** https://www.npmjs.com/package/motion ## Feature comparison | Feature | @humanspeak/svelte-motion | Motion One | Notes | | --- | --- | --- | --- | | animate(el, keyframes, opts) | Re-exported | Yes | | | Framework-specific component layer | Yes (Svelte 5) | No | | | motion. declarative proxies | ~170 tags | No | | | AnimatePresence exit animations | Yes | No | | | whileHover / whileTap / whileFocus | Yes | No | Motion ships imperative hover() / press() helpers; the whileX prop pattern lives in the Svelte layer. | | whileInView | Yes | inView() helper | Motion has an imperative inView() helper; Svelte Motion exposes it as a whileInView prop. | | 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 | | | Curved motion paths (transition.path / arc()) | 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) | | ## Svelte Motion strengths - Svelte 5 runes-native — built for runes, not retrofitted - Framer Motion-compatible API for component code (props, semantics, AnimatePresence, variants) - ~170 motion. 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 named exports for bundle-size-critical apps - TypeScript-first with full type safety across motion props, drag, variants, and hooks - MIT licensed — open source, fork it or vendor it, no commercial tier - 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 strengths - 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 ## Svelte Motion limitations - 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 limitations - 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 ## Verdict 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. ## Keywords motion one svelte, motion.dev svelte, motion svelte, svelte motion library, motion vs framer motion