Why Svelte's Animation System Matters
Svelte has revolutionized how developers think about animations in web applications. Unlike frameworks that require heavy external libraries for basic motion effects, Svelte ships with powerful built-in transitions and animations that work seamlessly with its reactive system. This native approach means smaller bundle sizes, better performance, and an animation API that feels intuitive from the first line of code you write.
The framework's animation system is built on a simple but powerful insight: transitions are most effective when they're declarative and tied directly to DOM changes. When an element enters or exits the DOM, Svelte can automatically animate that transition. This declarative approach eliminates the boilerplate code typically required to coordinate animations with state changes, letting you focus on the visual experience rather than the mechanics of making it happen. For teams evaluating whether Svelte is production-ready, our guide on using Svelte in production covers deployment considerations and performance benchmarks.
Built-In Transitions Overview
Svelte includes five built-in transitions that cover the most common animation scenarios. Each transition is optimized for performance and works seamlessly with Svelte's reactive system.
Each transition serves a specific purpose in your UI toolkit
Fade
Smoothly adjusts opacity from 0 to 1, perfect for modals, tooltips, and subtle entry effects
Fly
Combines opacity with X/Y translation, ideal for slide-in panels and notifications
Slide
Animates height for smooth expand/collapse effects in accordions and dropdowns
Scale
Creates grow/shrink effects by animating opacity and size simultaneously
Draw
Animates SVG stroke-dashoffset for line-drawing effects on paths
Basic Transition Syntax
Using transitions in Svelte is remarkably simple. Import the transition you need and apply it using the transition: directive:
1<script>2 import { fade, fly, slide, scale, draw } from 'svelte/transition';3 4 let show = $state(false);5</script>6 7<button onclick={() => show = !show}>Toggle</button>8 9{#if show}10 <div transition:fade>Fade in and out</div>11 <div transition:fly={{ x: 200, duration: 300 }}>Fly in from right</div>12 <div transition:slide>Slide open and closed</div>13 <div transition:scale>Scale up and down</div>14 <svg width="200" height="200">15 <path transition:draw d="M100 10 L190 190 L10 190 Z" />16 </svg>17{/if}Transition Parameters and Customization
All Svelte transitions accept an object of parameters that control their timing and behavior. The most commonly used parameters include duration (in milliseconds), delay (milliseconds before the transition starts), and easing functions that control the acceleration curve.
Svelte provides built-in easing functions through the svelte/easing module, including linear, cubicOut, elasticOut, backOut, and many others. Understanding these parameters gives you fine-grained control over how transitions feel. Pairing well-designed transitions with proper SEO optimization creates an engaging user experience that keeps visitors on your site longer.
1<script>2 import { fade, fly } from 'svelte/transition';3 import { elasticOut, cubicOut } from 'svelte/easing';4 5 let show = $state(false);6</script>7 8<!-- Customized fade with delay -->9<div transition:fade={{ duration: 400, delay: 200 }}>10 Delayed fade in11</div>12 13<!-- Fly with custom easing -->14<div transition:fly={{15 x: 0,16 y: 50,17 duration: 800,18 easing: elasticOut19}}>20 Elastic fly in21</div>Advanced Transition Techniques
Beyond basic enter/exit animations, Svelte provides sophisticated tools for complex animation scenarios.
Separate In and Out Transitions
Sometimes you want elements to enter and exit differently--for example, having new items fly in while old items simply fade out. Svelte provides the in: and out: directives for this purpose, allowing you to specify separate transitions for mounting and unmounting.
The crossfade function enables elements to appear to move from one position to another when transferred between containers, creating a compelling visual continuity that helps users understand where content has gone. This is particularly useful for building todo lists or Kanban boards where items move between states.
List Animations with Animate Flip
When items in a list change position, the default browser behavior is to instantly snap them to their new locations. Svelte's animate:flip directive implements the FLIP (First, Last, Invert, Play) animation technique, creating the illusion that items are smoothly sliding to their new positions rather than teleporting. The flip function requires a unique key parameter that identifies each list item across renders.
The flip animation is particularly effective for todo lists, Kanban boards, data tables, and any interface where items can be reordered. This technique pairs well with rendering large lists efficiently in React for optimal performance.
1<script>2 import { flip } from 'svelte/animate';3 import { fade } from 'svelte/transition';4 5 let items = $state([6 { id: 1, text: 'First item' },7 { id: 2, text: 'Second item' },8 { id: 3, text: 'Third item' }9 ]);10</script>11 12<ul>13 {#each items as item (item.id)}14 <li15 animate:flip={{ duration: 300 }}16 transition:fade17 >18 {item.text}19 </li>20 {/each}21</ul>Motion Stores for Reactive Animations
Beyond transitions that respond to DOM changes, Svelte provides motion stores for animating numeric values that update reactively.
Tweened Stores
The tweened store creates a value that smoothly interpolates from its current value to a new target value over time. This is perfect for progress indicators, color transitions, or any situation where you want to animate between two numeric values. Tweened stores work with Svelte's reactive system, so updates are automatically animated.
The store accepts duration and easing parameters, and supports both numeric values and CSS color strings for interpolation.
1<script>2 import { tweened } from 'svelte/motion';3 import { cubicOut } from 'svelte/easing';4 5 const progress = tweened(0, {6 duration: 800,7 easing: cubicOut8 });9 10 function increase() {11 progress.set($progress + 10);12 }13</script>14 15<button onclick={increase}>Animate</button>16<progress value={$progress} max="100"></progress>Spring Stores
While tweened stores animate linearly over a fixed duration, spring stores create physics-based animations that feel more natural. A spring store simulates a spring with configurable stiffness and damping, producing animations that overshoot slightly and settle naturally. Springs are ideal for draggable elements, hover effects, or any UI that should feel tactile and responsive.
Springs handle rapid updates gracefully, adjusting their trajectory naturally rather than restarting from the beginning.
1<script>2 import { spring } from 'svelte/motion';3 4 const scale = spring(1, {5 stiffness: 0.1,6 damping: 0.257 });8 9 function handleHover() {10 scale.set(1.1);11 }12 13 function handleLeave() {14 scale.set(1);15 }16</script>17 18<button19 onmouseenter={handleHover}20 onmouseleave={handleLeave}21 style="transform: scale({$scale})"22>23 Hover me24</button>Custom Transitions
While Svelte's built-in transitions cover most use cases, you can create custom transitions using the transition function. This allows for highly customized animations that go beyond simple property tweens.
1<script>2 import { transition } from 'svelte/transition';3 import { cubicOut } from 'svelte/easing';4 5 function wobble(node, { duration = 500, amount = 20 } = {}) {6 return {7 duration,8 easing: cubicOut,9 css: (t) => {10 const eased = 1 - Math.pow(1 - t, 3);11 const x = amount * Math.sin(t * Math.PI * 2 * 3) * eased;12 return `transform: translateX(${x}px) rotate(${t * 360}deg);`;13 }14 };15 }16 17 let show = $state(false);18</script>19 20<button onclick={() => show = !show}>Toggle</button>21 22{#if show}23 <div transition:wobble={{ duration: 600, amount: 30 }}>24 Wobbly entrance!25 </div>26{/if}Performance and Best Practices
Creating smooth animations requires understanding both browser rendering and animation techniques.
Accessibility and Reduced Motion
Animations can cause discomfort for users with vestibular disorders. Svelte's transition system has built-in support for the prefers-reduced-motion media query--when this is set, Svelte automatically shortens or removes animations. Best practice is to always provide a gentle fallback for users who prefer reduced motion.
Test your animations with reduced motion enabled in your browser's developer tools. When active, transitions should still communicate the same information but with minimal movement. This accessibility-first approach ensures your web applications are usable and comfortable for all users. Incorporating accessibility best practices into your development workflow also improves your site's search engine visibility as search engines favor user-friendly experiences.
1<script>2 import { fly } from 'svelte/transition';3 let show = $state(false);4</script>5 6<button onclick={() => show = !show}>Toggle</button>7 8{#if show}9 <!-- Automatically respects reduced motion preference -->10 <div transition:fly={{ x: 200, duration: 400 }}>11 Accessible motion12 </div>13{/if}Frequently Asked Questions
Conclusion
Svelte's animation system represents a thoughtful balance of power and simplicity. The built-in transitions handle common cases elegantly, while the extensible API supports complex custom animations. Combined with motion stores for reactive values and accessibility-first design, Svelte provides everything needed to create polished, performant user interfaces.
The key to effective animation is restraint--use motion to communicate state changes and guide user attention, not as decoration. Subtle, purposeful animations enhance the experience; excessive animations annoy users and distract from content. When applied purposefully, Svelte's animations transform static interfaces into engaging experiences.