Svelte ships fade, fly, slide, scale, blur, … in svelte/transition so you can just import those ones and use them out of the box. But you also can create your own actions and transitions, and use them via use: directive, or with in:/out:, - very convenient across elements. Let me share several actions that i use the most often in our design system.

What Svelte gives you natively is the ergonomics: a one-line use:/in:/out: directive on any element, with teardown handled for you. React has no native directive and no built-in enter/exit system — exit animations in particular usually mean a library like AnimatePresence. (Vue, fair to note, has both natively — custom directives and <Transition>.)

Materialize / Dematerialize

Visual-only enter/exit for overlays (modals, tooltips, toasts) — opacity + scale + blur + Y, no layout shift. Custom alternative to Svelte's built-in fade.

{#if open}
  <div in:materialize out:dematerialize>
    Modal / tooltip / toast content
  </div>
{/if}

Morph

A persistent element smoothly resizes when its content changes - no mount/unmount.

<div use:morph={{ width: false, height: true }}>
  {#if expanded}<LongContent />{:else}<ShortContent />{/if}
</div>

Emerge / Dissolve

The counterpart to morph. Morph animates an existing element's size; emerge/dissolve mount and unmount elements - and because they animate the new card's height and margin up from zero, the card below slides down to make room instead of snapping.

{#each cards as card (card.id)}
  <div in:emerge out:dissolve>{card.title}</div>
{/each}

Tooltip

Hover or focus a button - a tooltip appears and Floating UI flips / shifts it to stay on screen. This is the one action that imports a third-party package, for the collision-aware positioning math.

Imports @floating-ui/dom (computePosition + flip/shift + autoUpdate)

<button use:tooltip={'Saved to your library'}>Hover me</button>

Gradient Border

The CTA's rotating comet border stops spinning on hover and locks onto your cursor.

<button class="btn-cta" use:laserAim>Get started</button>