svelte/motion.
Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus,
in-view), variants, FLIP layout animations, shared-layout transitions, spring physics,
and scroll-linked motion values. The drop-in Framer Motion alternative for
Svelte and SvelteKit.
drag with spring physics.
Drop drag onto any motion tag and read its motion values live. This demo derives rotation from horizontal drag offset in component state.
- drag
- dragConstraints
- dragElastic
why svelte motion.
The most complete motion library for Svelte 5 — modelled on Framer Motion.
Drop-in motion.<tag>
170 proxy components covering every HTML and SVG element. Add initial, animate, and transition props to any tag.
AnimatePresence
Mount and unmount with exit animations. mode="sync", "wait", or "popLayout" — same semantics as Framer Motion.
Gestures & Drag
whileHover, whileTap, whileFocus, whileInView, plus a full drag API with constraints, momentum, elastic, snap-to-origin.
Variants
Named animation states that propagate from parent to children. Orchestrate stagger and choreography without managing state by hand.
Layout & Shared Layout
FLIP-based layout animation with the layout prop. Animate between elements across the DOM with layoutId.
Spring & Scroll-linked
useSpring for physics-based motion values. useScroll + useTransform for scroll-linked animations. SSR-safe by default.
orchestrate variants with stagger.
One parent state cascades to N children. Adjust stagger and direction live.
how we compare.
Honest, side-by-side comparison with every major motion / animation library you'd consider for Svelte.
| library | framework | declarative | exit anim | gestures | layout | spring |
|---|---|---|---|---|---|---|
| @humanspeak/svelte-motion ● | Svelte 5 | yes | yes | yes | yes | yes |
| framer-motion | React only | yes | yes | yes | yes | yes |
| motion / Motion One | agnostic | no | no | partial | no | yes |
| GSAP | agnostic | no | no | plugins | Flip plugin | plugins |
| svelte/transition | Svelte (built-in) | partial | yes | no | no | partial |
| svelte/animate | Svelte (built-in) | partial | no | no | FLIP only | no |
explore interactive examples.
AnimatePresence, shared layout, hover & tap, variants, scroll-progress, path morphing — every concept has a live, editable demo.
Shared Layout Animation
Animate between two elements anywhere in the DOM with a shared layoutId. The FLIP engine interpolates the transition automatically.
Hover & Tap
whileHover and whileTap give you fluent gesture states. Combine with spring transitions for natural micro-interactions.
Variants
Define named animation states once and orchestrate them across a tree. Stagger, propagate, and cascade without managing each child.
Scroll Progress
useScroll gives you a motion value for page progress. Pipe it through useTransform to drive any property.
Path Morphing
Animate SVG path d attributes with motion.path. Perfect for icon transitions and shape-shifting illustrations.
AnimatePresence
Wrap conditionally-rendered components and they exit gracefully on unmount. mode="wait" / "sync" / "popLayout" supported.