blessed way of animations and transitions for svelte 5?

[JonathonRP]

What the svelte 5 blessed path for animations and transitions?

[farfromexact]

For Svelte 5, the blessed path depends on the kind of animation, but it is still the built-in declarative primitives rather than manually mutating DOM nodes.

• Use CSS transitions for simple state changes that do not need JavaScript timing.
• Use the transition directive for enter/exit behavior.
• Use keyed each blocks plus the animate directive for list reordering, especially FLIP-style movement.
• Use the current motion primitives when the animated value is application state rather than an element's lifecycle.

The important distinction is between an element entering/leaving and an element moving because data was reordered. A transition is not a substitute for a keyed list animation, and an unkeyed each block can make it look as if Svelte animated the wrong DOM node.

For Svelte 5 code, I would keep the source of truth in runes/state and let the template consume it. Avoid mixing a manually managed requestAnimationFrame loop with Svelte's lifecycle unless the animation is genuinely canvas/WebGL work. If a component needs a custom easing function, make the effect a small reusable transition rather than coupling it to a specific page.

A useful test matrix is: initial render, conditional mount/unmount, keyed reorder, rapid state changes, reduced-motion preference, and SSR/hydration. If you can describe the exact case you are deciding between, the answer is usually one of those primitives rather than a new animation framework.

[DYNOSuprovo]

The current Svelte 5 approach for animations and transitions is largely the same API as Svelte 4, just updated to work within the runes system. Here's the complete picture:

Transitions (transition:, in:, out:)

Still fully supported and the primary mechanism for enter/leave animations:

<script>
  import { fade, fly, slide, scale, blur } from 'svelte/transition';

  let visible = $state(false);
</script>

{#if visible}
  <div transition:fade={{ duration: 300 }}>Fades in and out</div>
  <div in:fly={{ y: 20, duration: 400 }} out:fade>Flies in, fades out</div>
{/if}

All built-in transitions (fade, fly, slide, scale, blur, draw) work exactly as in Svelte 4.

Animations (animate:flip)

The animate: directive works on {#each} block items when they reorder:

<script>
  import { flip } from 'svelte/animate';
  let items = $state(['A', 'B', 'C', 'D']);
</script>

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

The tweened and spring stores → now Tween and Spring classes

In Svelte 5, the rune-friendly way to animate values is via the new class-based API in svelte/motion:

<script>
  import { Tween, Spring } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';

  // Tween: smooth interpolation over fixed duration
  const count = new Tween(0, { duration: 400, easing: cubicOut });

  // Spring: physics-based, feels natural
  const coords = new Spring({ x: 0, y: 0 });
</script>

<button onclick={() => count.target = 100}>Animate to 100</button>
<p>{Math.round(count.current)}</p>

<svelte:window onmousemove={(e) => { coords.target = { x: e.clientX, y: e.clientY }; }} />
<div style="transform: translate({coords.current.x}px, {coords.current.y}px)">🎯</div>

Note: The old tweened() and spring() store functions still work for backward compatibility, but new Tween() / new Spring() are the Svelte 5-idiomatic way. The .current property (readable, reactive) replaces the store subscription pattern, and .target sets the destination value.

CSS transitions for non-conditional elements

For elements that don't conditionally mount/unmount, use CSS @keyframes or the Web Animations API via $effect:

<script>
  let el = $state(null);

  function pulse() {
    el?.animate([
      { transform: 'scale(1)' },
      { transform: 'scale(1.15)' },
      { transform: 'scale(1)' }
    ], { duration: 300, easing: 'ease-out' });
  }
</script>

<button bind:this={el} onclick={pulse}>Pulse me</button>

Summary

Use case	Svelte 5 API
Element enters/leaves DOM	transition:fade, in:fly, out:slide, etc.
List items reorder	animate:flip
Numeric value interpolation	new Tween(value, options)
Physics-based spring animation	new Spring(value, options)
Custom keyframe animations	Web Animations API in $effect

The Svelte 5 docs have dedicated pages for Transitions and Motion with the full API reference.