svelte-advanced

Svelte 5 — Advanced Techniques

For tasks that go beyond standard component work: animation, DOM integration, packaging, advanced server flows, and PWA features.

Transitions

Apply enter/exit animations to elements that conditionally render.

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

{#if visible}
  <div transition:fade={{ duration: 300 }}>fades both in and out</div>
{/if}

{#if visible}
  <div in:fly={{ y: 20, duration: 200 }} out:fade>independent in/out</div>
{/if}

Built-ins: fade, fly, slide, scale, blur, draw (SVG path), crossfade (paired enter/exit between elements).

A custom transition is a function returning a config:

import { cubicOut } from 'svelte/easing';

export function spin(node: Element, { duration = 400 }) {
  return {
    duration,
    easing: cubicOut,
    css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t}`
  };
}

css runs as a CSS keyframe animation (best perf). Use tick(t, u) for frame-by-frame JS work when CSS isn't enough.

Transitions are local by default (don't play when a parent block toggles). Use transition:fade|global to opt in.

Animations (animate:)

Smoothly reorder items inside a keyed {#each} block.

<script>
  import { flip } from 'svelte/animate';
  let items = $state([...]);
</script>

{#each items as item (item.id)}
  <li animate:flip={{ duration: 300 }}>{item.text}</li>
{/each}

flip (First-Last-Invert-Play) is the standard. Required: the (item.id) key — otherwise Svelte can't track identity through reorders.

Motion Module

svelte/motion provides spring and tween primitives:

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

  const x = new Spring(0, { stiffness: 0.1, damping: 0.4 });
  const opacity = new Tween(1, { duration: 300 });
</script>

<button onclick={() => { x.target = 200; opacity.target = 0; }}>animate</button>
<div style:transform="translateX({x.current}px)" style:opacity={opacity.current}>...</div>