Svelte Transitions and Animations

Svelte Transitions and Animations

Add enter/exit animations, list reordering motion, and spring physics to Svelte elements using built-in and custom transitions

When to Use

• You need elements to animate in/out when they enter or leave the DOM based on conditional rendering
• You want to animate list reordering when items move within an {#each} block
• You need smooth value transitions (progress bars, counters) using tweened or spring stores
• You are building custom animation functions for reusable transition effects

Instructions

Built-in transitions:

1. Import and apply transitions from svelte/transition. They run when the element is conditionally rendered:

<script>
  import { fade, fly, slide, scale, blur } from 'svelte/transition'
  let show = $state(true)
</script>

<button onclick={() => show = !show}>Toggle</button>

{#if show}
  <div transition:fade>Fades in and out</div>
  <div transition:fly={{ y: 20, duration: 300 }}>Flies from below</div>
  <div transition:slide>Slides open/closed</div>
{/if}

2. Use in: and out: directives to apply different transitions for enter and exit:

{#if show}
  <div in:fly={{ x: -100 }} out:fade>
    Flies in from left, fades out
  </div>
{/if}

3. Pass parameters to customize built-in transitions:

<div transition:fly={{ x: 0, y: 50, duration: 400, easing: quintOut }}>
  Parameterized fly
</div>

Import easing functions from svelte/easing: linear, cubicIn, cubicOut, cubicInOut, quintOut, elasticOut, backOut, etc.

Custom transitions:

4. Write a custom transition function that returns CSS keyframes or a tick function:

// CSS-based custom transition (most performant)
function swoosh(node: Element, { duration = 300 } = {}) {
  return {
    duration,
    css: (t: number) => `
      transform: translateX(${(1 - t) * 100}%) rotate(${(1 - t) * 45}deg);
      opacity: ${t};
    `,
  };
}

// JS-based tick function (for canvas or non-CSS animations)
function typewriter(node: Element, { speed = 40 } = {}) {
  const text = node.textContent ?? '';
  return {
    duration: text.length * speed,
    tick: (t: number) => {
      node.textContent = text.slice(0, Math.floor(t * text.length));
    },
  };
}

Animating list items with animate:flip:

5. Use animate:flip to smoothly reorder elements in {#each} blocks when items move:

<script>
  import { flip } from 'svelte/animate'
  import { fade } from 'svelte/transition'

  let items = $state(['A', 'B', 'C', 'D'])

  function shuffle() {
    items = [...items].sort(() => Math.random() - 0.5)
  }
</script>

<button onclick={shuffle}>Shuffle</button>

{#each items as item (item)}
  <div animate:flip={{ duration: 300 }} transition:fade>
    {item}
  </div>
{/each}

Note: (item) — the key expression — is required for animate:flip to track element identity.

Tweened and spring stores for smooth value transitions:

6. Use tweened for smooth numeric value interpolation (progress bars, counters):

<script>
  import { tweened } from 'svelte/motion'
  import { cubicOut } from 'svelte/easing'

  const progress = tweened(0, { duration: 500, easing: cubicOut })

  function complete() { progress.set(1) }
</script>

<progress value={$progress} />
<button onclick={complete}>Complete</button>

7. Use spring for physics-based motion that overshoots and settles:

<script>
  import { spring } from 'svelte/motion'

  const pos = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 })
</script>

<div
  style="transform: translate({$pos.x}px, {$pos.y}px)"
  onmousemove={(e) => pos.set({ x: e.clientX, y: e.clientY })}
/>

Deferred transitions (crossfade):

8. Use crossfade to animate an element from one position to another across the DOM (shared element transition):

<script>
  import { crossfade } from 'svelte/transition'
  const [send, receive] = crossfade({ duration: 400 })
</script>

{#if inList}
  <div in:receive={{ key: item.id }} out:send={{ key: item.id }}>
    {item.name}
  </div>
{:else}
  <div in:receive={{ key: item.id }} out:send={{ key: item.id }}>
    {item.name}
  </div>
{/if}

Details

How transitions work:

Svelte compiles transition:, in:, and out: directives into JavaScript that runs when the element is added to or removed from the DOM. CSS-based transitions run entirely on the compositor thread and do not block the main thread.

global modifier:

By default, transitions only run when the direct parent {#if} changes. Add :global to run the transition when any ancestor condition changes:

{#if outerCondition}
  {#if innerCondition}
    <div transition:fade|global>
      Fades when either condition changes
    </div>
  {/if}
{/if}

Transition events:

Listen to transition lifecycle events:

<div
  transition:fly
  onintrostart={() => console.log('entering')}
  onintroend={() => console.log('entered')}
  onoutrostart={() => console.log('leaving')}
  onoutroend={() => console.log('left')}
/>

Performance considerations:

• Prefer CSS-based custom transitions (return css) over JS tick functions — CSS runs off the main thread
• Avoid animating width/height — use transform: scaleX() and transform: scaleY() instead
• slide animates height and may cause layout thrash on complex elements; prefer scale or custom transitions for performance-sensitive cases

Source

https://svelte.dev/docs/svelte/transition

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.