Deferred transitions in Svelte

Introduction

Deferred transitions let you delay animations until after the browser finishes updating the page. This helps keep the page smooth and fast.

When you want to animate an element but only after the page layout is stable.

When you have multiple animations and want to avoid jank or flicker.

When you want to improve user experience by making transitions feel natural and smooth.

When you want to defer heavy animations until after important content is visible.

Syntax

Svelte

import { deferred, fade } from 'svelte/transition';

<div transition:deferred={{ delay: 200, duration: 400 }} transition:fade>
  Content
</div>

The deferred transition wraps another transition and delays it.

You can pass options like delay and duration to control timing.

Examples

This example defers a fade transition by 300ms and runs it over 500ms.

Svelte

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

<div transition:deferred={{ delay: 300 }} transition:fade={{ duration: 500 }}>
  Hello with deferred fade
</div>

Here, the fly transition is deferred by 100ms before starting.

Svelte

<script>
  import { fly } from 'svelte/transition';
  import { deferred } from 'svelte/transition';
</script>

<div transition:deferred={{ delay: 100 }} transition:fly={{ x: 200, duration: 400 }}>
  Fly in after delay
</div>

Sample Program

This Svelte component shows a green box that appears with a fade transition. The fade is deferred by 500ms, so it starts only after half a second. The button toggles the box visibility. Accessibility features like aria-pressed, aria-live, and keyboard focus are included.

Svelte

<script>
  import { fade } from 'svelte/transition';
  import { deferred } from 'svelte/transition';
  let visible = false;
</script>

<button on:click={() => visible = !visible} aria-pressed={visible} aria-label="Toggle box">
  Toggle Box
</button>

{#if visible}
  <div
    transition:deferred={{ delay: 500 }}
    transition:fade={{ duration: 800 }}
    role="region"
    aria-live="polite"
    tabindex="0"
    style="width: 200px; height: 100px; background-color: #4caf50; color: white; display: flex; align-items: center; justify-content: center; margin-top: 1rem; border-radius: 0.5rem;"
  >
    Deferred Fade Box
  </div>
{/if}

Important Notes

Deferred transitions help avoid layout thrashing by waiting for the browser to finish updates.

You can combine deferred with any built-in or custom transition in Svelte.

Use ARIA roles and labels to keep animations accessible to all users.

Summary

Deferred transitions delay animations until the page is stable.

They improve smoothness and user experience.

Use them by importing deferred and wrapping other transitions.