[Svelte Series 9] Adding Dynamic Flow with Svelte Transitions and Animation

Once the structure holds, it’s time to tune focus with motion. Short, clear transitions let people feel the information hierarchy with their eyes.

Key terms

1. Transition: An animation applied as an element enters or leaves the DOM, e.g., transition:fly.
2. animate:flip: A built-in directive that reorders list items smoothly so each element animates to its new position.
3. Motion store: A special store that interpolates numeric values smoothly, such as the spring helper.
4. Spring parameters: Numbers like stiffness and damping that control elasticity and slowdown.

Core ideas

Transitions run when elements appear or disappear. Attach transition:fade or transition:fly to handle entrance and exit in one go. Animations act on elements already on screen—animate:flip is the go-to for list reordering. Motion stores interpolate numeric values over time; spring makes a value ease toward its target, great for pointer followers or graphs.

Code examples

Combine a panel toggle, list reorder, and spring motion in one example.

<script>
  import { fade, fly } from 'svelte/transition';
  import { flip } from 'svelte/animate';
  import { spring } from 'svelte/motion';

  let isOpen = false;
  let items = [
    { id: 1, name: 'Algorithms', score: 87 },
    { id: 2, name: 'UI Design', score: 93 }
  ];

  const pointer = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });

  function sortByScore() {
    items = [...items].sort((a, b) => b.score - a.score);
  }
  function move(x, y) {
    pointer.set({ x, y });
  }
</script>

<button on:click={() => (isOpen = !isOpen)}>Notifications</button>
{#if isOpen}
  <aside transition:fly={{ x: 40, duration: 200 }}>
    <p transition:fade>Upcoming schedule</p>
  </aside>
{/if}

<button on:click={sortByScore}>Sort by score</button>
<ul animate:flip>
  {#each items as item (item.id)}
    <li>{item.name} — {item.score}</li>
  {/each}
</ul>

<div class="pointer" style:transform={`translate(${$pointer.x}px, ${$pointer.y}px)`}></div>
<button on:click={() => move(120, 20)}>Menu</button>
<button on:click={() => move(280, 160)}>Content</button>

Conditional panels apply fly and fade for a gentle open/close. The list’s animate:flip keeps items gliding to their new spots after sorting. The spring store makes the pointer glide toward the coordinates instead of snapping.

Why it matters

In school event dashboards or experimental projects, data refreshes constantly. Sudden changes confuse users. Quick transitions highlight which region changed, list animations emphasize rank shifts, and spring-based motion keeps graphs or pointers readable so learners stay focused.

Practice checklist

• Follow along: reproduce the panel toggle, list reorder, and pointer movement.
• Extend it: add filter buttons so animate:flip handles items disappearing and reappearing.
• Debug: if nothing moves, ensure {#if} and {#each} blocks have keys and directives sit on the right elements.
• Completion criteria: all three motions complete smoothly in about 200 ms each.

Wrap-up

Use transitions and animation to emphasize information, not to decorate everything. Apply them briefly so they reinforce the layout and data flow. Next we’ll tackle form actions and validation to keep that polished flow intact during input.