Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Bounce Animation - Svelte-motion Typing CST Test
Bounce Animation — Svelte-motion Code
Div bounces vertically on mount.
# svelte_motion/demo/Bounce.svelte
<script>
import { motion } from 'svelte-motion'
</script>
<motion.div
initial={{ y: -100 }}
animate={{ y: 0 }}
transition={{ type: 'spring', stiffness: 150, damping: 10 }}
style="width:100px; height:100px; background:yellow;"
/>Svelte-motion Language Guide
Svelte-Motion is a lightweight, physics-based animation library for Svelte that provides spring-driven transitions, gesture integration, and declarative motion components. It brings natural and fluid animations to Svelte apps using springs instead of fixed-duration tweens.
Primary Use Cases
- ▸Animate component entry/exit
- ▸Smooth element transitions using spring dynamics
- ▸Dragging, gestures, and physics-based interactivity
- ▸Animating sequences, lists, and layout changes
- ▸Interactive hover or press effects
Notable Features
- ▸Physics-based spring animations
- ▸Svelte actions + store-based values
- ▸Simple API similar to Framer Motion’s Motion components
- ▸Gesture support (drag, pan)
- ▸Composable animation controls and variants
Origin & Creator
Svelte-Motion was created by the Svelte community, inspired by Framer Motion and React Spring, and emerged around 2020 as a physics-based animation solution tailored for Svelte’s reactivity.
Industrial Note
Used in dashboards, interactive UIs, creative websites, product demos, and Svelte apps that require fluid, physics-driven motion with lightweight performance.
Quick Explain
- ▸Svelte-Motion uses realistic spring physics to animate elements smoothly.
- ▸Its API is fully Svelte-friendly, using stores, actions, and components.
- ▸Designed to animate both single values and full components declaratively.
- ▸Supports enter/exit animations with Svelte’s transition lifecycle.
- ▸Integrates with pointer gestures for interactive motion.
Core Features
- ▸motion - main motion component wrapper
- ▸spring stores - animatable values with physics
- ▸variants - predefined animation states
- ▸gestures - drag, hover, press interactions
- ▸transition controls - programmatic control of animations
Learning Path
- ▸Learn Svelte reactivity & stores
- ▸Understand motion component basics
- ▸Work with variants
- ▸Use gestures (drag/hover)
- ▸Build reusable animations via configs
Practical Examples
- ▸Fade in a card using spring animations
- ▸Drag an element with bounce-back motion
- ▸Animate menu open/close transitions
- ▸List item spring entry animations
- ▸Interactive hover effects with scale motion
Comparisons
- ▸Svelte-Motion vs CSS transitions - physics-based vs static
- ▸Svelte-Motion vs Framer Motion - smaller but similar API
- ▸Svelte-Motion vs GSAP - declarative vs timeline-heavy
- ▸Svelte-Motion vs Popmotion - Svelte-native vs generic JS
- ▸Svelte-Motion vs Svelte's built-in transition - more control & physics
Strengths
- ▸Extremely lightweight (Svelte-optimized)
- ▸Very intuitive reactive API
- ▸Natural motion thanks to spring physics
- ▸Gesture support built-in
- ▸Excellent performance because of Svelte’s DOM compiler
Limitations
- ▸Smaller ecosystem compared to React motion libraries
- ▸Fewer advanced timeline tools than GSAP
- ▸Limited documentation compared to Framer Motion
- ▸Primarily DOM-oriented (not ideal for 3D/Canvas)
- ▸No built-in stagger utilities (manual implementation required)
When NOT to Use
- ▸Pure CSS hover effects
- ▸High-performance timeline-based sequences -> GSAP
- ▸Complex SVG morphing -> specialized libraries
- ▸Large-scale UI with many simultaneous springs
- ▸3D or WebGL animations -> Three.js
Cheat Sheet
- ▸<motion.div initial={{opacity:0}} animate={{opacity:1}} transition={{stiffness:150}} />
- ▸variants={{open:{scale:1}, closed:{scale:0.8}}}
- ▸use:drag={{constraints:{left:0,right:100}}}
- ▸spring(value, {stiffness, damping})
- ▸$springStore gives current animated value
FAQ
- ▸Is Svelte-Motion production-ready? -> Yes.
- ▸Does it support gestures? -> Yes, drag/hover/press.
- ▸Can it animate lists? -> Yes, with Svelte loops.
- ▸Does it replace Svelte transitions? -> It complements them.
- ▸Does it support SSR? -> Yes, initial states work.
30-Day Skill Plan
- ▸Week 1: Learn basic motion props
- ▸Week 2: Build list animations
- ▸Week 3: Add gestures
- ▸Week 4: Complex UI transitions
- ▸Week 5: Build full animated SvelteKit pages
Final Summary
- ▸Svelte-Motion brings physics-based, natural motion to Svelte.
- ▸Its API is lightweight and reactive.
- ▸Supports gestures, variants, and spring animations.
- ▸Ideal for modern interactive UIs.
- ▸Perfect fit for Svelte + SvelteKit applications.
Project Structure
- ▸src/components/ - animated components
- ▸src/lib/motion/ - variants and motion configs
- ▸App.svelte - main Svelte entry
- ▸styles/ - SCSS/CSS for layout
- ▸stores/ - spring values for animations
Monetization
- ▸Premium Svelte component libraries
- ▸Motion-based UI kits
- ▸Animated website templates
- ▸SaaS dashboards
- ▸Client projects with high-polish UIs
Productivity Tips
- ▸Reuse variant definitions
- ▸Use stores for shared animation states
- ▸Combine gestures with springs for natural interactions
- ▸Use SvelteKit's file routing for animated pages
- ▸Organize animations in separate modules
Basic Concepts
- ▸motion component - animatable wrapper
- ▸variants - named animation states
- ▸spring store - animatable state value
- ▸gestures - drag, press, hover behaviors
- ▸transitions - physics configuration (stiffness, damping)