Svelte-Animationen selbst erstellen – diese Custom-Actions brauchst du

Mit Svelte lassen sich Übergänge wie fade, fly oder slide einfach nutzen – doch die wahre Stärke der Bibliothek liegt in der Möglichkeit, eigene Animationen zu definieren. Diese Custom-Actions machen deine UI nicht nur interaktiver, sondern auch konsistenter. Hier sind die vier wichtigsten Animationen, die ich regelmäßig in unserem Designsystem einsetze.

Viele Entwickler wissen nicht, dass Svelte nicht nur vorgefertigte Übergänge mitbringt, sondern auch ein elegantes System für selbstdefinierte Animationen. Die Syntax ist durchdacht: Ein einziger use:-Befehl reicht aus, um eine Animation auf ein Element anzuwenden. Im Gegensatz zu React, das keine native Direktive oder ein eingebautes Enter/Exit-System besitzt, bietet Svelte hier einen klaren Vorteil. Vue hingegen bietet zwar native Direktiven und Transitionen, doch Sveltes Ansatz ist oft intuitiver, da die Logik direkt in die Komponente integriert wird.

Materialisieren und Dematerialisieren: Sanfte Ein- und Ausblendungen

Modals, Tooltips und Toasts erfordern oft subtile Animationen, die keine Layout-Verschiebungen verursachen. Die Kombination aus Skalierung, Unschärfe und vertikaler Bewegung schafft einen fließenden Übergang, der sich nahtlos in den Kontext einfügt. Diese Lösung ist eine echte Alternative zu Sveltes fade-Übergang, da sie mehrere visuelle Effekte kombiniert.

Der folgende Code zeigt, wie einfach eine Materialisierungs-Animation implementiert wird:

{#if offen}
  <div in:materialisieren out:dematerialisieren>
    Inhalte des Modals / Tooltips / Toasts
  </div>
{/if}

Die Animation vermeidet harte Sprünge und sorgt dafür, dass sich das Element organisch in die UI einfügt. Besonders nützlich ist dies für Benachrichtigungen, die nicht nur visuell ansprechend sein sollen, sondern auch die Nutzererfahrung verbessern.

Morph: Fließende Größenanpassung ohne Mount/Unmount

Dynamische Inhalte, deren Größe sich ändert, lassen sich mit Morph elegant animieren. Im Gegensatz zu klassischen Lösungen, die Elemente bei Änderungen neu rendern, behält Morph die bestehende Instanz bei und passt nur ihre Abmessungen an. Dies verhindert störende Layout-Änderungen und schafft ein flüssiges Nutzererlebnis.

Ein typisches Szenario ist ein expandierbarer Bereich, der zwischen einem kurzen und langen Text wechselt:

<div use:morph={{ width: false, height: true }}>
  {#if erweitert}
    <LangerText />
  {:else}
    <KurzerText />
  {/if}
</div>

Der Konfigurationsparameter height: true sorgt dafür, dass nur die Höhe animiert wird, während width: false sicherstellt, dass die Breite konstant bleibt. Diese Anpassung ist besonders in responsiven Layouts von Vorteil, da sie unnötige Neuzeichnungen vermeidet.

Emerge und Dissolve: Ansprechende Ein- und Ausblendungen

Während Morph bestehende Elemente animiert, kommen Emerge und Dissolve zum Einsatz, wenn Elemente tatsächlich gemountet oder ungemountet werden. Die Animationen starten mit einer Höhe und einem Abstand von null und dehnen sich dann aus, sodass nachfolgende Elemente sanft nachrücken. Dies verhindert das typische „Schnappen“ von Listen oder Grids.

In einer Kartenansicht lässt sich dies wie folgt umsetzen:

{#each kartenListe as karte (karte.id)}
  <div in:emergieren out:auflösen>
    {karte.titel}
  </div>
{/each}

Die Animationen sorgen dafür, dass neue Elemente nicht abrupt erscheinen, sondern sich natürlich in die bestehende Struktur einfügen. Besonders bei dynamischen Inhalten, wie sie in Social-Media-Apps oder Dashboards vorkommen, ist dies ein entscheidender Faktor für eine hochwertige Nutzererfahrung.

Tooltip mit intelligenter Positionierung

Tooltips, die sich an die Mausbewegung oder den Fokus anpassen, erfordern mehr als nur CSS. Die Bibliothek Floating UI (ehemals Popper.js) übernimmt die komplexe Logik zur Kollisionserkennung und Positionierung. Mit einem einzigen use:-Befehl wird ein Tooltip erstellt, der automatisch an den Bildschirmrand angepasst wird.

Der folgende Code demonstriert die Implementierung:

<button use:tooltip={'In deine Bibliothek gespeichert'}>
  Hover mich
</button>

<script>
  import { tooltip } from '$lib/actions/tooltip.js';
</script>

Die Action importiert die notwendigen Funktionen von @floating-ui/dom, um Kollisionen zu erkennen und die Positionierung dynamisch anzupassen. Dies ist besonders in responsiven Designs von Vorteil, in denen Tooltips nicht immer nach rechts oder links passen.

Gradient Border: Interaktive Hover-Effekte

Ein weiterer beliebter Animationseffekt ist die Gradient Border, die auf Hover reagiert. Ein rotierender Farbverlauf bleibt stehen und „verfolgt“ den Mauszeiger, während der Nutzer über einen Button fährt. Dieser Effekt eignet sich hervorragend für Call-to-Action-Buttons, um die Aufmerksamkeit gezielt zu lenken.

Die Implementierung erfolgt über eine benutzerdefinierte Action:

<button class="btn-cta" use:laserZiel>Loslegen</button>

<style>
  .btn-cta {
    background: transparent;
    border: 2px solid;
    border-image: linear-gradient(45deg, #ff00cc, #3333ff) 1;
    transition: border-image 0.3s ease;
  }
</style>

Die Action laserZiel steuert die Interaktion und sorgt dafür, dass der Gradient sich an die Mausposition anpasst. Dieser Effekt ist nicht nur visuell ansprechend, sondern erhöht auch die Interaktionsrate, da Nutzer eher auf animierte Buttons klicken.

Custom-Actions in Svelte bieten eine mächtige Möglichkeit, die Interaktivität und das Nutzererlebnis deiner Anwendung zu verbessern. Von sanften Ein- und Ausblendungen bis hin zu dynamischen Größenanpassungen und interaktiven Tooltips – die Flexibilität von Svelte erlaubt es dir, Animationen exakt an deine Designanforderungen anzupassen. Experimentiere mit den vorgestellten Techniken und integriere sie in dein Designsystem, um konsistente und ansprechende Nutzererfahrungen zu schaffen. Die Zukunft der Web-Animationen liegt in der Kombination aus Performance und Kreativität – und Svelte gibt dir die Werkzeuge, um diese Vision umzusetzen.