Svelte Transitions

A transition animates an element as it enters or leaves the page, replacing an abrupt appearance or disappearance with a smooth visual effect. Svelte includes several ready-made transitions and lets you write your own custom ones too.

Why Transitions Matter

An element popping instantly onto the page can feel jarring to a visitor, especially for elements like notifications, dropdown menus, or modal windows. A brief, smooth animation gives visitors a clearer visual cue about what just appeared or disappeared.

Using A Built-In Transition

<script>
  import { fade } from "svelte/transition";
  let visible = true;
</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
  <p transition:fade>This text fades in and out</p>
{/if}

Clicking the button toggles visible between true and false. Instead of the paragraph snapping in and out instantly, it fades smoothly using the fade transition.

Transition Timing Diagram

visible becomes true
        |
        v
Element starts at 0% opacity
        |
        v
Opacity rises smoothly over the animation duration
        |
        v
Element reaches 100% opacity, fully visible

Setting Transition Options

<script>
  import { fade } from "svelte/transition";
</script>

{#if visible}
  <p transition:fade={{ duration: 800 }}>Fades over 800 milliseconds</p>
{/if}

The duration option controls how long the animation takes to finish, measured in milliseconds. A larger number produces a slower, more gradual transition.

Different Transitions For Entering And Leaving

<script>
  import { fly, fade } from "svelte/transition";
</script>

{#if visible}
  <p in:fly={{ y: 50 }} out:fade>Flies in, fades out</p>
{/if}

The in: directive controls the entering animation, and the out: directive controls the leaving animation separately. This paragraph flies upward when it appears and fades smoothly when it disappears.

Common Built-In Transitions

• fade changes an element's opacity smoothly
• fly moves an element in from a chosen direction while fading it
• slide reveals or hides an element by adjusting its height smoothly
• scale grows or shrinks an element from its center

Combining Multiple Transitions

<script>
  import { fade, scale } from "svelte/transition";
</script>

{#if visible}
  <div transition:fade transition:scale>Fades and scales together</div>
{/if}

Attaching more than one transition directive runs both animations at the same time, blending their visual effects together.

A Layman Analogy

Think of a transition as a curtain rising slowly on a stage instead of a sudden light switch flick. The slow rise gives the audience a smoother, easier moment to notice the change happening in front of them.

Running Code When A Transition Finishes

Two special events fire alongside a transition, letting you run code the moment an animation starts or ends.

<p
  transition:fade
  on:introstart={() => console.log("Starting to appear")}
  on:outroend={() => console.log("Finished disappearing")}
>
  Watch the console
</p>

This pattern helps when a follow-up action, such as removing an element from a list entirely, needs to wait until its disappearing animation actually finishes.

Writing A Custom Transition

A custom transition function returns settings describing how a value should shift across the animation's duration, giving you full control beyond the built-in options.

Key Points

• Transitions animate elements as they enter or leave the page
• The transition: directive applies the same animation both ways
• The in: and out: directives set separate animations for entering and leaving
• Options like duration adjust how long an animation takes