Page Transitions im Web

Page Transitions sind Animationen, die beim Wechsel zwischen Seiten oder Ansichten in einer Web-Applikation abgespielt werden und den Übergang visuell verbinden, um ein kohärentes, flüssiges Navigationserlebnis zu schaffen.

Was sind Page Transitions?

Im Web bedeutet Navigation traditionell ein vollständiges Neuladen der Seite – ein harter Schnitt ohne visuelle Kontinuität. Page Transitions überbrücken diesen Bruch, indem sie das Verlassen einer Seite und das Erscheinen der nächsten animieren.

Nativ in Apps (iOS, Android) sind animierte Seitenübergänge Standard. Im Web waren sie lange nur mit JavaScript-Frameworks und erheblichem Aufwand realisierbar. Mit der View Transitions API (Chrome 111+, 2023) gibt es nun eine native Browser-Lösung.

Erklärung

View Transitions API (nativ, modern)

Die View Transitions API ist die revolutionärste Neuerung für Web-Animationen seit Jahren. Sie ermöglicht flüssige Übergänge mit minimalem Code:

```javascript // Einfachste Form: Ohne Animation, aber mit Cross-Fade async function zeigeNeueSeite(url) { if (!document.startViewTransition) { // Fallback für ältere Browser await ladeSeite(url); return; }

document.startViewTransition(async () => { await ladeSeite(url); }); } ```

Das startViewTransition-Callback macht automatisch einen Screenshot der aktuellen Seite, führt die DOM-Änderung durch, und animiert mit einem Cross-Fade zwischen Alt und Neu.

Benutzerdefinierte View Transition Animationen

```css / Standard-Cross-Fade anpassen / ::view-transition-old(root) { animation: 300ms cubic-bezier(0.4, 0, 1, 1) both slideAusblenden; }

::view-transition-new(root) { animation: 300ms cubic-bezier(0, 0, 0.2, 1) 90ms both slideEinblenden; }

@keyframes slideAusblenden { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-30px); opacity: 0; } }

@keyframes slideEinblenden { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } ```

Shared Element Transitions

Das Herausragende an View Transitions ist die Möglichkeit, einzelne Elemente zwischen zwei Seiten zu verbinden:

```css / Auf Listenseite / .produkt-bild { view-transition-name: produkt-bild; / Eindeutiger Name / }

/ Auf Detailseite / .detail-bild { view-transition-name: produkt-bild; / Gleiches Element! / } ```

Der Browser animiert automatisch die Position und Größe des Elements zwischen den zwei Zuständen – ähnlich dem iOS-Zoom-Effekt beim Öffnen einer App.

```javascript // Vollständiges Beispiel: Listenitem → Detailseite document.querySelectorAll('.produkt-karte').forEach(karte => { karte.addEventListener('click', async () => { const bild = karte.querySelector('img'); bild.style.viewTransitionName = 'hero-bild'; // Dynamisch setzen

await document.startViewTransition(async () => { await router.navigate(/produkt/${karte.dataset.id}); });

bild.style.viewTransitionName = ''; // Zurücksetzen }); }); ```

Traditionelle SPA-Transitions (CSS + JS)

Vor der View Transitions API, und als Fallback:

```javascript // React-ähnlicher Ansatz mit CSS-Klassen const routerUebergang = { async wechsle(neueKomponente) { const container = document.querySelector('#app');

// Ausblenden container.classList.add('verlassend'); await warte(300);

// DOM wechseln container.innerHTML = ''; container.appendChild(neueKomponente);

// Einblenden container.classList.remove('verlassend'); container.classList.add('eintretend'); await warte(300); container.classList.remove('eintretend'); } }; ```

```css .verlassend { animation: ausblenden 0.3s ease-out forwards; }

.eintretend { animation: einblenden 0.3s ease-out forwards; }

@keyframes ausblenden { to { opacity: 0; transform: translateX(-20px); } }

@keyframes einblenden { from { opacity: 0; transform: translateX(20px); } } ```

Barba.js – Page Transitions für MPAs

Für Multi-Page-Applications (klassische Server-gerenderte Seiten) ermöglicht Barba.js sanfte Übergänge ohne SPA-Architektur:

```javascript import barba from '@barba/core'; import { gsap } from 'gsap';

barba.init({ transitions: [{ name: 'standard-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0, y: -20, duration: 0.4 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0, y: 20, duration: 0.4 }); } }] }); ```

Beispiele

Direktionale Transition (Breadcrumb-Navigation)

```javascript // Richtungsabhängige Animation let navigationsRichtung = 1; // 1 = vorwärts, -1 = rückwärts

document.addEventListener('click', e => { if (e.target.closest('[data-zurueck]')) navigationsRichtung = -1; else navigationsRichtung = 1; });

document.startViewTransition(() => { // CSS-Variable für Richtung setzen document.documentElement.style.setProperty( '--nav-richtung', navigationsRichtung.toString() ); return ladeSeite(neueUrl); }); ```

```css ::view-transition-new(root) { animation: slideEin 0.35s ease-out; transform: translateX(calc(100% * var(--nav-richtung))); }

@keyframes slideEin { from { transform: translateX(calc(100% * var(--nav-richtung))); } to { transform: translateX(0); } } ```

Framer Motion Page Transitions (React)

Für React-Projekte siehe Framer Motion für React für die vollständige Integration.

```jsx // AnimatePresence für Page Transitions in React import { motion, AnimatePresence } from 'framer-motion';

const seitenVarianten = { initial: { opacity: 0, x: 20 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -20 } };

export default function Seite({ kinder, pfad }) { return ( <AnimatePresence mode="wait"> <motion.div key={pfad} variants={seitenVarianten} initial="initial" animate="animate" exit="exit" transition={{ duration: 0.3, ease: 'easeOut' }} > {kinder} </motion.div> </AnimatePresence> ); } ```

In der Praxis

Grundregeln für Page Transitions:

• Dauer: 250–400 ms (schneller als man denkt – 400 ms fühlen sich bereits langsam an)
• Richtung vermitteln: Vorwärts-Navigation → nach links, Zurück → nach rechts
• Exit und Enter nicht gleichzeitig (zu viel Bewegung), oder beide sehr dezent
• Wichtige Inhalte nicht durch Transition verbergen

Browser-Support View Transitions API (2024):

• Chrome/Edge 111+: Vollständig
• Safari: Ab Safari 18 (2024)
• Firefox: In Entwicklung

Immer Fallback implementieren: if (!document.startViewTransition).

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Beeinflussen Page Transitions SEO? Nein, Suchmaschinen crawlen keine JavaScript-Transitionen. Inhalte müssen im HTML vorhanden sein, unabhängig von der Transition.

Wie verhindere ich, dass Transitions bei schnellen Klicks brechen? document.startViewTransition gibt ein Objekt zurück. Wenn eine neue Transition startet, während die alte läuft, wird die alte skip()-Methode aufgerufen.

Können Transitions mit `prefers-reduced-motion` respektvoll umgesetzt werden? ``javascript if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) { document.startViewTransition(() => aktualisiereDOM()); } else { aktualisiereDOM(); // Kein Übergang } ``

Verwandte Einträge

• Framer Motion für React – React-native Lösung für Page Transitions
• GSAP (GreenSock) – Grundlagen – GSAP als Basis für Barba.js-Transitions
• CSS Animationen (@keyframes) – Technische Basis für klassische CSS-Klassen-Übergänge
• Scrollytelling – Animation beim Scrollen – Animationen innerhalb einer Seite

Weiterführend

• Jake Archibald: Smooth and simple transitions with the View Transitions API (2023) – developer.chrome.com
• MDN: View Transitions API (2024) – developer.mozilla.org
• Barba.js: barba.io – Dokumentation und Beispiele
• Dave Rupert: Page Transitions for Everyone (2023) – daverupert.com
• Chrome Developers: View Transitions Demo Collection – chromewebstore.google.com