Sveltejs Academy · Lesson

Combining transitions and animations

Layer transitions and animations together for rich, coordinated UI effects.

Layered Motion

Combine transition: and animate: for items that fade-in AND smoothly reposition.

A todo list where new items fly in and existing items reorder smoothly.

{#each todos as todo (todo.id)}
  <li in:fly={{ y: 20 }} animate:flip>{todo.text}</li>
{/each}