Svelte Transitions and Animations

<script>
  import { fade, fly, slide, scale, blur } from &#039;svelte/transition';
  let visible = true;
</script>

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

<!-- fade: opacity 0 to 1 -->
{#if visible}
  <div transition:fade={{ duration: 300 }}>Fades in and out</div>
{/if}

<!-- fly: moves AND fades -->
{#if visible}
  <div transition:fly={{ y: 50, duration: 400, easing: &#039;ease-out' }}>Flies from below</div>
{/if}

<!-- slide: reveals/collapses height -->
{#if visible}
  <div transition:slide={{ duration: 300 }}>Slides open and closed</div>
{/if}

<!-- scale: grows from zero -->
{#if visible}
  <div transition:scale={{ start: 0.5, duration: 300 }}>Scales in</div>
{/if}

<script>
  import { fade, fly } from &#039;svelte/transition';
</script>

{#if visible}
  <div
    in:fly={{ x: -100, duration: 400 }}
    out:fade={{ duration: 200 }}
  >
    Flies in from left, fades out
  </div>
{/if}

<script>
  import { flip } from &#039;svelte/animate';
  import { fade } from &#039;svelte/transition';

  let items = [
    { id: 1, name: &#039;Item A' },
    { id: 2, name: &#039;Item B' },
    { id: 3, name: &#039;Item C' }
  ];

  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }

  function addItem() {
    items = [...items, { id: Date.now(), name: `Item ${items.length + 1}` }];
  }

  function remove(id) {
    items = items.filter(i => i.id !== id);
  }
</script>

<button on:click={shuffle}>Shuffle</button>
<button on:click={addItem}>Add</button>

<ul>
  {#each items as item (item.id)}
    <li
      animate:flip={{ duration: 300 }}
      transition:fade={{ duration: 200 }}
    >
      {item.name}
      <button on:click={() => remove(item.id)}>✕</button>
    </li>
  {/each}
</ul>

<div
  transition:fade
  on:introstart={() => console.log(&#039;Starting to show')}
  on:introend={() => console.log(&#039;Fully visible')}
  on:outrostart={() => console.log(&#039;Starting to hide')}
  on:outroend={() => console.log(&#039;Fully hidden')}
>
  Animated element
</div>

<script>
  function typewriter(node, { speed = 50 }) {
    const text = node.textContent;
    const duration = text.length * speed;

    return {
      duration,
      tick: (t) => {
        const i = Math.trunc(text.length * t);
        node.textContent = text.slice(0, i);
      }
    };
  }
</script>

{#if visible}
  <p transition:typewriter={{ speed: 30 }}>Hello, World!</p>
{/if}

<script>
  import { fade, fly, scale } from &#039;svelte/transition';
  import { flip } from &#039;svelte/animate';

  let cards = [
    { id: 1, title: &#039;Revenue', value: '$24,500', icon: '💰', color: '#6366f1' },
    { id: 2, title: &#039;Users', value: '1,420', icon: '👥', color: '#10b981' },
    { id: 3, title: &#039;Orders', value: '384', icon: '🛍️', color: '#f59e0b' },
    { id: 4, title: &#039;Satisfaction', value: '94%', icon: '⭐', color: '#ef4444' }
  ];
  let notifications = [];
  let showNav = true;

  function addNotification(msg) {
    const id = Date.now();
    notifications = [...notifications, { id, msg }];
    setTimeout(() => {
      notifications = notifications.filter(n => n.id !== id);
    }, 3000);
  }
</script>

<div class="dashboard">
  {#if showNav}
    <aside transition:fly={{ x: -280, duration: 400 }}>
      <h2>Dashboard</h2>
      <nav>
        <a href="/">🏠 Home</a>
        <a href="/analytics">📊 Analytics</a>
      </nav>
    </aside>
  {/if}

  <main>
    <div class="stat-grid">
      {#each cards as card (card.id)}
        <div
          class="stat-card"
          animate:flip={{ duration: 300 }}
          in:scale={{ duration: 400 }}
          style="border-top: 4px solid {card.color}"
        >
          <span class="icon">{card.icon}</span>
          <div class="stat-value">{card.value}</div>
          <div class="stat-title">{card.title}</div>
        </div>
      {/each}
    </div>

    <button on:click={() => addNotification(&#039;Data refreshed!')}>Refresh</button>
  </main>
</div>

<!-- Floating notifications -->
<div class="notifications">
  {#each notifications as n (n.id)}
    <div class="toast" transition:fly={{ y: 60, duration: 300 }}>
      {n.msg}
    </div>
  {/each}
</div>