# Svelte Motion vs Framer Motion Framer Motion is React-only. Svelte Motion is its Svelte 5 counterpart. ## Overview Framer Motion is the canonical declarative animation library for React. @humanspeak/svelte-motion is the Svelte 5 counterpart — same prop names, same component model (motion., AnimatePresence, variants), same gestures, same FLIP layout animation, same spring physics. Different framework underneath. - **Svelte Motion site:** https://motion.svelte.page - **Svelte Motion npm:** https://www.npmjs.com/package/%40humanspeak%2Fsvelte-motion - **Svelte Motion slug:** svelte-motion - **Category:** React Animation Library - **Approach:** Declarative components (React-only) - **Website:** https://www.framer.com/motion - **GitHub:** https://github.com/motiondivision/motion - **npm:** https://www.npmjs.com/package/framer-motion ## Feature comparison | Feature | @humanspeak/svelte-motion | Framer Motion | Notes | | --- | --- | --- | --- | | motion. proxies (HTML + SVG) | ~170 tags | ~170 tags | | | Tree-shakeable named exports (MotionDiv, …) | Yes | No | | | AnimatePresence (sync / wait / popLayout) | Yes | Yes | | | Variants with parent → child propagation | Yes | Yes | | | whileHover / whileTap / whileFocus / whileInView | Yes | Yes | | | Drag (constraints, momentum, elastic, snap) | Yes | Yes | | | FLIP layout / layout="position" | Yes | Yes | | | Shared layout via layoutId | Yes | Yes | | | Spring physics | Yes | Yes | | | Curved motion paths (transition.path / arc()) | Yes | Yes | | | Scroll-linked motion values | Yes | Yes | | | useAnimate imperative scoped animations | Yes | Yes | | | MotionConfig provider | Yes | Yes | | | useReducedMotion / useReducedMotionConfig | Yes | Yes | | | usePresence / useIsPresent custom exit | Yes | Yes | | | Framework | Svelte 5 | React only | | | staggerChildren orchestrator on parent variants | Per-child delay pattern | Yes | Svelte Motion expects you to drive the cascade with a per-child transition.delay; the parent-level orchestrator is not yet wired. | | Reactivity model | Svelte 5 runes (stores read with $) | React hooks | | ## 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 - Drop-in API for migrating React component code to Svelte 5 - No JSX → Svelte syntax gotchas on the animation props themselves ## Framer Motion strengths - The canonical declarative animation library on React — battle-tested at scale - Massive community, plugin ecosystem, and reference content - Parent-level staggerChildren orchestrator handles cascades automatically - Direct integration with Framer (the design tool) for design → code workflows ## 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 ## Framer Motion limitations - React-only — cannot be used in Svelte, Vue, or vanilla JS projects - Adds React + ReactDOM as runtime dependencies - JSX-based mental model — different from Svelte template syntax ## Verdict If you are building in React, use Framer Motion. If you are building in Svelte 5 (or migrating from React + Framer Motion), use @humanspeak/svelte-motion — it is the closest behavioural match on Svelte 5 and the recommended migration target. ## Keywords framer motion svelte, framer motion alternative svelte, framer motion for svelte, svelte framer motion, react framer motion migration