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>
