examples.
Interactive animation demos built with @humanspeak/svelte-motion — spring physics, gestures, layout animations, exit animations, and scroll-linked motion. Pick a card, edit, ship.
pick an example.
Each page is a self-contained, copy-pasteable demo with the source you need.
animate-presence.
Interactive AnimatePresence animation example using Svelte Motion.
animate-presence-custom.
Directional exit animations powered by AnimatePresence custom data and dynamic variants.
animated-button.
Interactive animated button animation example using Svelte Motion.
animated-tabs.
Interactive animated tabs animation example using Svelte Motion.
characters-remaining.
Interactive characters remaining animation example using Svelte Motion.
color-interpolation.
Interactive color interpolation animation example using Svelte Motion.
conic-gradient.
Interactive conic gradient animation example using Svelte Motion.
fancy-like-button.
Interactive fancy like button animation example using Svelte Motion.
hover-and-tap.
Interactive hover and tap animation example using Svelte Motion.
html-content.
Interactive html content animation example using Svelte Motion.
keyframes.
Interactive Keyframes animation example using Svelte Motion.
layout-group.
Scope shared-layout animations to a subtree so sibling regions reusing the same layoutId animate independently.
layout-scroll.
Keep FLIP layout animations anchored when the parent container scrolls mid-animation.
lazy-motion.
Load Svelte Motion feature bundles with LazyMotion and the m namespace.
motion-path.
Interactive motion path animation example using Svelte Motion.
motion-value-children.
Render MotionValue values as live text in motion elements.
multi-state-badge.
Interactive multi-state badge animation example using Svelte Motion.
notifications-stack.
Interactive notifications stack animation example using Svelte Motion.
object-style-motion-values.
Interactive object style motion values animation example
optimized-appear.
Start SSR appear animations before Svelte hydrates the motion runtime.
pan.
Interactive pan animation example
path-morphing.
Interactive path morphing animation example using Svelte Motion.
reordering.
Interactive Reordering animation example using Svelte Motion.
rotate.
Interactive Rotate animation example using Svelte Motion.
scroll-progress.
Interactive scroll progress animation example using Svelte Motion.
shared-layout-animation.
Interactive shared layout animation example using Svelte Motion.
style-string.
Interactive styleString animation example using Svelte Motion.
tab-select.
Interactive tab select animation example using Svelte Motion.
toggle-switch.
Interactive toggle switch animation example using Svelte Motion.
use-animate.
Interactive useAnimate animation example using Svelte Motion.
use-animation-controls.
Coordinate motion components from a shared imperative controller.
use-animation-frame.
Interactive useAnimationFrame animation example using Svelte Motion.
use-cycle.
Interactive useCycle animation example using Svelte Motion.
use-follow-value.
Interactive use follow value animation example
use-in-view.
Interactive useInView animation example using Svelte Motion.
use-presence.
Interactive usePresence animation example using Svelte Motion.
use-presence-data.
Read AnimatePresence custom data from an entering or exiting child.
use-reduced-motion.
Interactive useReducedMotion animation example using Svelte Motion.
use-reduced-motion-config.
Resolve the active reduced-motion policy by combining a parent <MotionConfig> override with the OS preference.
use-time.
Interactive useTime animation example using Svelte Motion.
use-time-synced.
Interactive useTime (synced) animation example using Svelte Motion.
variants-basic.
Interactive variants basic animation example using Svelte Motion.
variants-dynamic.
Per-instance variants — function-form factories receive the custom prop, driving staggered index-based delays.
variants-propagation.
Interactive variants propagation animation example using Svelte Motion.
variants-while-hover.
Pass a variant key (or array) to whileHover, whileTap, whileFocus, whileDrag, or whileInView to reuse named states across gestures.
while-focus.
Interactive while focus animation example using Svelte Motion.
while-in-view.
Interactive while in view animation example using Svelte Motion.
animate-presence → gesture + exit animations