Sanfte Seitenübergänge mit der View Transitions API

Würdigung — der Wunsch nach App-Gefühl ist berechtigt#

Der Eindruck täuscht nicht: Eine Website, deren Seiten weich ineinander übergehen, fühlt sich wertiger an als eine, die bei jedem Klick hart umspringt. Für eine Kanzlei, die online Seriosität ausstrahlen will, ist das kein Spielkram, sondern ein echter Qualitäts-Eindruck — der erste, den ein Besucher beim Navigieren bekommt.

Der bisherige Weg dorthin war allerdings teuer erkauft. Weiche Übergänge zwischen Seiten setzten lange eine schwere JavaScript-Bibliothek voraus, die die Navigation komplett übernahm. Das brachte eigenes Gewicht mit, das der Browser erst laden und ausführen musste, und es verschob ein Problem, das eigentlich der Browser am besten löst, in fremden Code. Genau dieselbe Abwägung steckt hinter unserer Haltung zu sanftem Scrollen: Auf fahoch2.de übernimmt das die native Browser-Funktion, nicht eine zugeladene Bibliothek. Schlanker, schneller, weniger Fehlerquellen.

Was die View Transitions API nativ leistet#

Die View Transitions API ist eine Funktion, die moderne Browser von sich aus mitbringen. Sie nimmt den alten Zustand der Seite und den neuen und blendet weich zwischen beiden über — ohne dass dafür eine externe Bibliothek nötig wäre. Der Browser macht im Hintergrund eine Momentaufnahme des Vorher- und des Nachher-Zustands und animiert den Wechsel selbst. Für die Entwicklung heißt das: Man beschreibt, was übergeht, und überlässt das Wie der Animation dem Browser, der das hochoptimiert und ruckelarm erledigt.

Der Unterschied zur bisherigen Bibliotheks-Lösung ist grundlegend. Statt fremden Code zu laden, der die Navigation an sich reißt, nutzt man eine Fähigkeit, die im Browser ohnehin steckt. Das ist dieselbe Logik, die hinter unserem statisch gerenderten Aufbau steht: die Plattform tun lassen, was sie am besten kann, statt sie mit zugeladener Maschinerie zu überlagern. Moderne Frameworks haben die View Transitions API inzwischen eingebaut, sodass sich die nativen Übergänge sauber in eine bestehende Architektur einfügen.

Warum native Funktionen zu einer schnellen Kanzlei-Site passen#

Jede zugeladene JavaScript-Bibliothek hat einen Preis, der bei den Kennzahlen für Geschwindigkeit landet. Mehr mitgeladener Code heißt: Der Browser muss mehr herunterladen, mehr verarbeiten, bevor die Seite voll bedienbar ist. Das schlägt direkt auf die Werte durch, die der Insight zu den Core Web Vitals erklärt — vor allem auf die Reaktionsgeschwindigkeit bei Eingaben.

Eine native Funktion hat dieses Gewicht nicht. Sie steckt schon im Browser, es gibt nichts nachzuladen. Damit bekommt man den hochwertigen Übergang, ohne den Preis bei der Geschwindigkeit zu zahlen — App-Gefühl und schnelle Seite schließen sich nicht mehr aus. Für eine Kanzlei-Website, bei der die Hälfte der Besucher mobil und teils mit langsamer Verbindung kommt, ist das genau die richtige Abwägung: Wirkung ja, aber nicht auf Kosten der Ladezeit.

Reduced Motion ist Pflicht, nicht Kür#

Hier kommt ein Punkt, der bei Animationen gerne untergeht und bei einer Kanzlei besonders zählt: Nicht jeder Mensch verträgt Bewegung auf dem Bildschirm gleich gut. Manche Menschen reagieren auf Bewegungs-Animationen mit Schwindel oder Unwohlsein und stellen deshalb im Betriebssystem ein, dass sie weniger Bewegung wünschen. Diese Einstellung — Reduced Motion — gibt der Browser an die Website weiter, und eine gut gebaute Seite hält sich daran.

Das heißt konkret: Wer Reduced Motion eingestellt hat, bekommt die weichen Übergänge nicht aufgezwungen, sondern einen schlichten, sofortigen Wechsel. Das ist kein optionales Extra, sondern Teil der Barrierefreiheit, die der Insight zu WCAG 2.1 AA im Detail behandelt — und seit dem Barrierefreiheitsstärkungsgesetz für viele Kanzlei-Angebote auch eine Pflicht. Auf fahoch2.de respektieren wir diese Einstellung an jeder Stelle, an der Bewegung im Spiel ist; bei einer View-Transitions-Einbindung wäre es nicht anders. Eine Animation, die sich über den ausdrücklichen Wunsch des Nutzers hinwegsetzt, ist kein Qualitäts-Merkmal, sondern ein Mangel.

Maß halten — Übergänge sind Würze, nicht Hauptgericht#

Ein ehrlicher Schlusspunkt: Weiche Übergänge sind Würze. Sie heben den Eindruck, wenn sie dezent und schnell sind — und sie kippen ins Aufdringliche, wenn sie zu lang, zu verspielt oder überall sind. Für eine Kanzlei, die Seriosität ausstrahlen will, ist Zurückhaltung der bessere Ratgeber: ein ruhiger, kurzer Übergang an den Hauptwegen, nicht ein Effekt-Feuerwerk bei jedem Klick. Die Technik ist heute leicht zu haben; die Disziplin, sie sparsam einzusetzen, ist der eigentliche Qualitäts-Beweis.

Was Kanzleien davon haben#

• App-Gefühl ohne Ladezeit-Strafe: Weiche Übergänge aus dem Browser selbst, ohne schwere Bibliothek und ihr Gewicht.
• Bessere Geschwindigkeits-Werte: Weniger mitgeladenes JavaScript hilft direkt den Kennzahlen, die auch ins Suchmaschinen-Ranking einfließen.
• Niemand wird ausgeschlossen: Die strikte Kopplung an Reduced Motion respektiert Menschen, die Bewegung schlecht vertragen — und erfüllt einen Barrierefreiheits-Standard.
• Seriös statt verspielt: Dezent eingesetzt unterstreicht der Übergang die Wertigkeit, ohne von den Inhalten abzulenken.

Für eine Einschätzung, welche Design-Details Ihrer Seite wirklich Wirkung bringen und welche nur Gewicht, empfehlen wir den Hebel-Audit (890 €, bei Mandanten-Boost-Beauftragung innerhalb von 60 Tagen voll anrechenbar).

Zusammenfassung#

Weiche Übergänge zwischen Seiten lassen eine Website hochwertig wirken — fast wie eine App. Lange brauchte das eine schwere JavaScript-Bibliothek, deren Gewicht auf die Ladezeit und die Geschwindigkeits-Kennzahlen drückte. Die View Transitions API liefert dieselben Übergänge nativ im Browser, ohne zusätzliches Gewicht: Der Browser blendet den alten und den neuen Zustand selbst weich ineinander. Das passt zu einer schlanken, schnellen Kanzlei-Website und zu der Haltung, die Plattform tun zu lassen, was sie am besten kann, statt sie mit zugeladenem Code zu überlagern. Pflicht dabei ist der Respekt vor der Reduced-Motion-Einstellung: Wer weniger Bewegung wünscht, bekommt einen schlichten, sofortigen Wechsel — das ist Teil der Barrierefreiheit, kein Extra. Und die wichtigste Disziplin bleibt das Maßhalten: Übergänge sind Würze, kein Hauptgericht.

Quellen#

• MDN — View Transitions API — abgerufen 2026-06-13
• MDN — Document.startViewTransition() — abgerufen 2026-06-13
• MDN — prefers-reduced-motion — abgerufen 2026-06-13
• Next.js — viewTransition-Konfiguration — abgerufen 2026-06-13

Disclaimer: Allgemeine fachliche Information zum Zeitpunkt der Veröffentlichung. Auf fahoch2.de ist die View Transitions API zum Veröffentlichungszeitpunkt nicht im Einsatz; native sanfte Scroll-Bewegung und der Respekt vor Reduced Motion sind umgesetzt. Die beschriebene Einbindung ist eine Architektur-Skizze, kein Live-Stand. Browser-Unterstützung entwickelt sich weiter.