Skip to main content

Command Palette

Search for a command to run...

Nice custom Svelte animations

Updated
2 min read
Nice custom Svelte animations
D
Frontend & UI engineer, focused on design systems and native-first UI. I care about the interaction details most people skip.

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.

r/sveltejs - Nice custom Svelte animations

<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.

r/sveltejs - Nice custom Svelte animations

{#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.

r/sveltejs - Nice custom Svelte animations

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.

r/sveltejs - Nice custom Svelte animations

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

More from this blog

D

Dimon

9 posts

I've spent the last while building a fairly large design system solo, and most of what I write here comes out of that: staying close to the browser, runtime theming, accessibility, and the small interaction details that make an interface feel right. This blog is where I write that down — practical frontend craft, honestly, including the parts I'm still figuring out. If you care about building UI that's fast, accessible, and doesn't fight the platform, you'll probably feel at home here.