Fade Fly and Slide Animations

Svelte includes several built-in transitions that help create smooth and interactive UI behavior. Different transitions create different visual effects depending on how elements should appear or disappear on the page.

In this chapter, you will work with the fade, fly, and slide transitions.

Using the fade Transition

The fade transition gradually changes the opacity of an element.

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

  let visible = true;
</script>

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

{#if visible}
  <p transition:fade>
    Fade Animation
  </p>
{/if}

The element smoothly fades in and out when it appears or disappears.

Using the fly Transition

The fly transition moves elements while animating them.

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

  let visible = true;
</script>

{#if visible}
  <div transition:fly={{ y: 50 }}>
    Flying Element
  </div>
{/if}

The element moves vertically while entering the page.

The y value controls the movement distance.

Using the slide Transition

The slide transition expands or collapses elements smoothly.

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

  let open = true;
</script>

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

{#if open}
  <div transition:slide>
    Dropdown Content
  </div>
{/if}

This transition is commonly used for menus, accordions, and expandable content.

Choosing the Right Transition

Different transitions work better for different UI patterns.

For example:

• fade works well for notifications;
• fly works well for cards and popups;
• slide works well for menus and expandable sections.

Frontend developers often combine multiple transitions to create more polished user experiences.