Layout-Animation: FLIP oder View Transitions?

Layout-Animation: Wie FLIP und View Transitions Sprünge im Interface glätten

Michael Dobler

Autor Dr. Web

29. Juli 2026

2 Min. Lesezeit

Wird ein Eintrag aus einer Liste gelöscht, springt der Rest ruckartig nach oben. Genau diese Sprünge lassen sich seit 2026 mit wenig Aufwand in flüssige Bewegung übersetzen, teils ganz ohne JavaScript-Bibliothek. Für Agenturen und Produktteams entscheidet die richtige Technik über Performance und Wartbarkeit.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Layout-Animation trennt ein durchdachtes Interface von einem, das bei jeder Zustandsänderung stockt. Der Design Engineer Karl Koch hat das Kernproblem in einem Fachbeitrag benannt: Für einen einzigen Frame verliert der Nutzer den Bezug zwischen seiner Aktion und den Objekten, die sich bewegt haben.^[1]

Das Wichtigste in Kürze

FLIP übersetzt Layout-Sprünge in GPU-günstige transform-Animationen, in vier Schritten.
Same-Document View Transitions sind seit Oktober 2025 Baseline und laufen in Chrome, Safari und Firefox.
Die Cross-Document-Variante fehlt in Firefox noch und bleibt damit eine progressive Verbesserung.
Bibliotheken wie Motion lohnen sich für komplexe, unterbrechbare Animationen, nicht für jeden Übergang.

Woher kommen die Sprünge im Layout?

Weißer Block auf Rollen mit Notiz fährt durch Lücke in Wand, hinterlässt Kreidespur — Springendes Layout beim Entfernen von Elementen irritiert Nutzer, obwohl der Browser das Layout technisch korrekt neu berechnet

Perzeptueller Bruch: Technisch ist an einem springenden Layout nichts falsch. Nach einer Zustandsänderung berechnet der Browser das Layout neu, und die verbliebenen Elemente erscheinen im nächsten Frame an ihrer neuen Position.

Fehlende Kontinuität: Der Nutzer hat vier Objekte gesehen, das zweite entfernt und erwartet, dass die anderen in die Lücke nachrücken. Stattdessen sind sie einfach dort, ohne sichtbaren Weg. Vieles, wofür früher JavaScript nötig war, erledigt modernes CSS heute nativ, und dazu gehört auch diese Bewegung.

Wie FLIP die Sprünge in Bewegung übersetzt

Vier Schritte: FLIP steht für First, Last, Invert, Play und geht auf den Google-Entwickler Paul Lewis zurück. Die alte Position wird gemessen, die Änderung angewendet, das Element per transform optisch an seinen Ausgangspunkt zurückgeschoben und diese Verschiebung dann auf null animiert.

GPU statt Layout: Der Trick liegt in der Wahl der Eigenschaft. Nur transform und opacity kann der Browser an den Compositor auslagern, also auf die Grafikkarte. Bei height oder top dagegen berechnet der Browser jeden Frame das Layout neu, und die Bewegung beginnt zu ruckeln.

Layout-Animation 2026: nativ oder per Bibliothek?

Wie moderne Interfaces Sprünge in flüssige Bewegung übersetzen.

4 Phasen

FLIP misst, verschiebt, kehrt um und spielt ab: First, Last, Invert, Play.

seit 2025

Same-Document View Transitions sind Baseline: Chrome 111, Safari 18, Firefox 144.

2 Werte

Nur transform und opacity laufen auf der GPU und bleiben flüssig.

Native View Transitions

Kein zusätzliches JavaScript-Bundle
Ideal für Zustands- und Seitenwechsel
Cross-Document noch ohne Firefox

Motion (Bibliothek)

layout-Prop erledigt FLIP automatisch
Feder-Physik, Gesten, unterbrechbare Keyframes
Über 30 Mio. npm-Downloads pro Monat (laut Anbieter)

Pflicht in beiden Fällen: prefers-reduced-motion respektieren, damit die Bewegung für empfindliche Nutzer abschaltbar bleibt.

Flüssige Übergänge sind kein Dekor, sondern der Unterschied zwischen einer Oberfläche, der Nutzer mühelos folgen, und einer, die sie bei jedem Klick neu sortieren müssen.
— Markus Seyfferth, Chefredakteur Dr. Web

Native View Transitions oder Motion: Was lohnt sich?

Nativer Weg: Same-Document View Transitions sind seit Oktober 2025 Baseline und laufen in Chrome ab Version 111, in Safari ab 18 und in Firefox ab 144.^[2] Diese Variante kostet kein zusätzliches Bundle und passt für Zustands- und Seitenwechsel.

Firefox-Lücke: Die Cross-Document-Variante für klassische Seitenwechsel greift bislang nur in Chrome ab 126 und Safari ab 18.2, während Firefox noch fehlt. Wie sich damit jede Website wie eine App anfühlen lässt, haben wir gesondert gezeigt. Für den Produktiveinsatz bleibt sie damit eine progressive Verbesserung.

Bibliothek Motion: Das frühere Framer Motion firmiert heute als Motion und nimmt einem die FLIP-Mechanik über die layout-Eigenschaft komplett ab. Nach Angaben des Anbieters zählt die Bibliothek über 30 Millionen npm-Downloads pro Monat und treibt Animationen unter anderem bei Figma.^[3] Ihre Stärke sind Feder-Physik, Gesten und unterbrechbare Keyframes.

Klare Handlungslinie: Für einfache Reihen und aufklappende Panels genügen native Mittel, deren Timing sich über moderne Easing-Funktionen fein justieren lässt. Erst für gestengesteuerte oder physikalisch anmutende Bewegung lohnt eine Bibliothek. In beiden Fällen gilt: prefers-reduced-motion respektieren, damit die Animation für empfindliche Nutzer abschaltbar bleibt.