Transitions

🎭 Svelte Transitions: Making Things Appear & Disappear Like Magic!

Imagine you’re a magician. When you make a rabbit appear from your hat, it doesn’t just pop into existence instantly. It gracefully rises up, fades in, or slides into view! That’s exactly what transitions do in Svelte. They make elements appear and disappear in beautiful, magical ways.

🌟 What Are Transitions?

Think of transitions like stage curtains in a theater. When actors enter, the curtains don’t just vanish—they slide open smoothly. When actors leave, the curtains close gracefully.

In Svelte, transitions control HOW something appears or disappears from your screen.

Without transitions: Things just pop in and out. Boring! 😴

With transitions: Things glide, fade, and dance onto the screen! 🎉

🌫️ Fade Transition

The fade transition is like a ghost appearing. It starts invisible (transparent) and slowly becomes visible (solid). When leaving, it does the opposite—slowly becomes invisible.

Real Life Example

• A lightbulb slowly turning on 💡
• Morning mist slowly disappearing
• A notification gently appearing on your phone

How It Works

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

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

{#if visible}
  <div transition:fade>
    I fade in and out!
  </div>
{/if}

The element starts at opacity: 0 (invisible) and smoothly changes to opacity: 1 (visible).

🛫 Fly Transition

The fly transition is like a bird flying onto the screen! The element comes from somewhere off-screen (like from the left, right, top, or bottom) and lands in its place.

Real Life Example

• A paper airplane flying onto your desk ✈️
• A notification sliding in from the side
• A pop-up flying up from the bottom

How It Works

<script>
  import { fly } from 'svelte/transition';
  let visible = true;
</script>

{#if visible}
  <div transition:fly={{ y: 200 }}>
    I fly in from below!
  </div>
{/if}

• y: 200 means it starts 200 pixels below its final spot
• y: -200 means it comes from 200 pixels above
• x: 200 means it comes from the right
• x: -200 means it comes from the left

📦 Slide Transition

The slide transition is like a drawer opening and closing. The element “unfolds” into view, revealing itself bit by bit. When it leaves, it “folds” back up and disappears.

Real Life Example

• A drawer sliding open 🗄️
• An accordion menu expanding
• A dropdown list appearing

How It Works

<script>
  import { slide } from 'svelte/transition';
  let visible = true;
</script>

{#if visible}
  <div transition:slide>
    I slide open like a drawer!
  </div>
{/if}

The element’s height grows from 0 to full size. It looks like the content is being “revealed” from behind a curtain.

🔍 Scale Transition

The scale transition is like a balloon inflating! The element starts tiny (or huge) and grows (or shrinks) to its normal size.

Real Life Example

• A balloon being blown up 🎈
• A pop-up zooming into view
• An icon growing when you click it

How It Works

<script>
  import { scale } from 'svelte/transition';
  let visible = true;
</script>

{#if visible}
  <div transition:scale>
    I grow from tiny to big!
  </div>
{/if}

The element starts at scale(0) (invisible, like a dot) and grows to scale(1) (full size).

⚙️ Transition Parameters

All transitions can be customized with special settings called parameters. Think of these like the dials on a radio—you can adjust how your transition works!

Common Parameters

Using Parameters

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

<div transition:fade={{
  duration: 800,
  delay: 100,
  easing: elasticOut
}}>
  I fade in slowly with a bouncy feel!
</div>

Easing Functions

Easing is like the personality of your animation:

• linear → Moves at constant speed (boring robot 🤖)
• elasticOut → Bounces at the end (like a rubber band)
• cubicOut → Starts fast, ends slow (like a car braking)
• bounceOut → Bounces like a ball 🏀

🚪 In Transitions

Sometimes you want different effects for entering vs leaving. The in: directive controls how elements appear.

Real Life Example

Imagine a door that swings open one way but slides the other way. Different entrances, different exits!

How It Works

<script>
  import { fly } from 'svelte/transition';
  let visible = true;
</script>

{#if visible}
  <div in:fly={{ x: -200 }}>
    I fly in from the LEFT only!
  </div>
{/if}

With in:, the element uses this transition only when appearing. When it disappears, it just vanishes instantly (unless you also add out:).

🚶 Out Transitions

The out: directive controls how elements disappear. It’s the exit strategy!

Real Life Example

An actor who always exits stage left, no matter where they entered from. 🎭

How It Works

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

{#if visible}
  <div
    in:fly={{ y: -100 }}
    out:fade={{ duration: 500 }}
  >
    I fly in from above, but fade out!
  </div>
{/if}

Now the element:

1. Appears by flying down from above
2. Disappears by fading away

Different entrance, different exit!

🌍 Local vs Global Transitions

This is about WHEN transitions run. Think of it like this:

Global Transitions (Default)

The transition runs anytime the element is added or removed from the page—even if its parent container is being added/removed.

Analogy: A guest who says goodbye to EVERYONE at a party, even when the party itself is ending. 👋

Local Transitions

The transition only runs when the element itself is toggled—NOT when its parent is being added/removed.

Analogy: A guest who only says goodbye when they personally decide to leave, not when the whole party ends.

How It Works

<script>
  import { slide } from 'svelte/transition';
  let showParent = true;
  let showChild = true;
</script>

{#if showParent}
  <div>
    {#if showChild}
      <!-- GLOBAL: Runs when showChild OR showParent changes -->
      <p transition:slide>Global transition</p>

      <!-- LOCAL: Only runs when showChild changes -->
      <p transition:slide|local>Local transition</p>
    {/if}
  </div>
{/if}

When to Use What?

🎬 Putting It All Together

Here’s a complete example using multiple transitions:

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

  let items = ['Apple', 'Banana', 'Cherry'];
  let showList = true;
</script>

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

{#if showList}
  <ul transition:slide>
    {#each items as item, i}
      <li
        in:fly={{ x: -50, delay: i * 100 }}
        out:fade
      >
        {item}
      </li>
    {/each}
  </ul>
{/if}

This creates a list where:

1. The whole list slides open
2. Each item flies in one after another (staggered by 100ms)
3. When removed, items fade out

🎯 Quick Summary

graph TD
    A["🎭 Transitions"] --> B["fade"]
    A --> C["fly"]
    A --> D["slide"]
    A --> E["scale"]

    B --> F["Ghost appearing/disappearing"]
    C --> G["Flying from x/y position"]
    D --> H["Drawer opening/closing"]
    E --> I["Balloon inflating/deflating"]

    A --> J["⚙️ Parameters"]
    J --> K["duration"]
    J --> L["delay"]
    J --> M["easing"]

    A --> N["🚪 Direction"]
    N --> O["in: entering only"]
    N --> P["out: leaving only"]
    N --> Q["transition: both ways"]

    A --> R["🌍 Scope"]
    R --> S["global: always runs"]
    R --> T["local: direct toggle only"]

🌟 Remember!

1. Fade = Opacity changes (ghost effect)
2. Fly = Position changes (bird landing)
3. Slide = Height reveals (drawer opening)
4. Scale = Size changes (balloon inflating)
5. Parameters = Customize duration, delay, easing
6. in:/out: = Different enter/exit effects
7. local = Only animate direct toggles

Transitions make your app feel alive and professional. They’re the difference between a boring website and a delightful experience! ✨

Now go make some magic happen! 🎩🐰