svelte animations.
The complete catalogue of Svelte animation patterns. Gestures, exit animations, FLIP layout, shared-layout transitions, variants, drag, scroll-linked motion values, SVG paths, and hooks — every pattern built with @humanspeak/svelte-motion, the Framer Motion-compatible animation library for Svelte 5 and SvelteKit. Each card links to a live, editable demo.
gestures.
whileHover, whileTap, whileFocus, whileInView — one prop, full gesture state.
Hover & Tap
whileHover + whileTap on a single motion.button with spring physics.
While Focus
Focus-state animation for accessible interactive elements.
While In View
Trigger animation when an element enters the viewport.
Fancy Like Button
Multi-state gesture with delight detail — tap, count, particles.
presence & exit.
AnimatePresence with mode="sync" | "wait" | "popLayout" for mount and unmount.
AnimatePresence
Enter and exit animations for conditionally-rendered elements.
Multi-State Badge
Cross-fade between badge states with synchronized transitions.
Notifications Stack
Stacked toasts with staggered enter / exit and shared layout.
usePresence
Custom exit choreography with safeToRemove and isPresent.
layout & shared layout.
FLIP-based layout animation and shared-layout transitions via layoutId.
Shared Layout
Animate between two elements anywhere in the DOM with shared layoutId.
Reordering
Smooth FLIP transitions as list items shuffle.
Animated Tabs
Underline indicator slides between tabs via layoutId.
Tab Select
Pill-style selector with layout-animated active state.
Toggle Switch
Layout-animated thumb that springs between on / off.
variants & orchestration.
Named states with parent → child propagation for choreographed cascades.
motion values & scroll.
Reactive motion values, useTransform mapping, and scroll-linked animation.
Rotate
Continuous rotation driven by a motion value.
Scroll Progress
Page-progress bar from useScroll + useTransform.
Color Interpolation
Smooth color tween via useTransform with input/output ranges.
Conic Gradient
Pointer-driven conic gradient with reactive motion values.
Characters Remaining
Animated character counter pulled from a motion value.
svg & paths.
motion.path, keyframe arrays, and animated d attributes for SVG morphs.
hooks.
useAnimate, useInView, useCycle, useReducedMotion, useTime — adapted for Svelte 5 runes.
useAnimate
Imperative scoped animations with a scope action + animate function.
useAnimationFrame
Run a callback every frame with time + delta.
useCycle
Cycle through a list of animation states imperatively.
useInView
Reactive boolean for viewport visibility (IntersectionObserver).
useReducedMotion
Respect prefers-reduced-motion at the component level.
useTime
A motion value that ticks continuously — ms since mount.
useTime (Synced)
Multiple time-driven animations sharing one motion value.
ui patterns.
End-to-end patterns combining motion.<tag>, gestures, and presence.
motion → install in 30 seconds