SSGOI: Seitenübergänge wie in nativen Apps, ohne die View Transition API

Michael Dobler

Autor Dr. Web

13. Oktober 2026

3 Min. Lesezeit

SSGOI ist eine kostenlose Open-Source-Bibliothek, die Seitenwechsel in Web-Apps so animiert wie in nativen Apps. Das Projekt verzichtet auf die View Transition API der Browser. Der Entwickler begründet das mit den Standbildern, die der Browser beim Wechsel anlegt.

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

Seitenübergänge wie in nativen Apps, etwa eine Detailseite, die beim Tipp aus dem Vorschaubild aufklappt, verlangen im Web bisher viel Handarbeit. SSGOI liefert solche Bewegungen als fertige Vorlagen und zeigt 16 Demo-Apps, darunter Nachbauten von Instagram, Pinterest und Airbnb.^[1]

Das Wichtigste in Kürze

SSGOI animiert Seitenwechsel in Web-Apps, PWAs und WebView-Apps, der Router bleibt.
Die Bibliothek steht unter MIT-Lizenz, kostet nichts und unterstützt sechs Frameworks.
Statt der View Transition API nutzt SSGOI die Web Animations API und läuft ab Safari 13.1.
Eine Abfrage der Systemeinstellung für reduzierte Bewegung fand die Redaktion im Paketcode nicht.

Wie funktioniert SSGOI?

Blaues Buch mit gefächerten Seiten und weißem Anhänger, auf dem „Weiter“ steht — SSGOI nutzt die Web Animations API, um beim Ein- und Aushängen von Seiten Animationen abzuspielen. Die Federphysik wird in Keyframes umgerechnet, während der Router die Navigation steuert

SSGOI beobachtet, wann das Framework eine Seite ein- und aushängt, und spielt dazu Animationen über die Web Animations API ab. Die Bibliothek rechnet die Federphysik vorab in Keyframes um, der Router steuert weiterhin die Navigation.^[2]

Der Einbau beschränkt sich in Next.js auf zwei Dateien: eine Konfiguration mit Routenregeln und einen Provider um den Seiteninhalt. Pro Route legen Entwickler den Effekt fest, etwa drill für den Sprung in die Tiefe oder zoom für das Aufklappen aus einem Bild.

Die Einrichtung übernehmen auf Wunsch Coding-Agenten. Dafür liegen eine llms.txt und ein Plugin für Claude Code und Codex bereit. Nach demselben Prinzip funktioniert der Agent-Skill von Libraries.dev für UI-Effekte.

Warum verzichtet SSGOI auf die View Transition API?

Bei der View Transition API friert der Browser alte und neue Ansicht als Momentaufnahmen ein und animiert nur diese Abbilder. Positionen und Bildausschnitte gibt die Schnittstelle nicht heraus, aufwendige Effekte müsste jede App selbst nachmessen.^[3]

Am Effekt Zoom wird der Unterschied sichtbar. SSGOI verkleinert dabei die gesamte Detailseite auf die Größe des Vorschaubilds und schneidet die Seite per clip-path auf den sichtbaren Bildausschnitt zu. Die ausgehende Seite bleibt echtes DOM statt eines Standbilds.^[3]

Die Browserfrage wiegt heute leichter als zum Projektstart 2023. Seit Firefox 144 beherrschen alle großen Browser View Transitions innerhalb eines Dokuments, Safari seit Version 18.^[4] SSGOI läuft dagegen schon ab Safari 13.1, Chrome 84 und Firefox 75 und damit auch auf älteren iPhones ohne iOS 18 sowie in WebView-Hüllen wie Capacitor oder Tauri.^[2]

SSGOI auf einen Blick

Lizenz, Voraussetzungen und Abgrenzung zu den Alternativen

Kennzahlen (Stand 13. Oktober 2026)

0 €

MIT-Lizenz, ohne Bezahltarif

Frameworks: React, Vue, Svelte, Solid, Angular, Qwik

13.1

älteste unterstützte Safari-Version

995

Sterne auf GitHub

Drei Wege zum animierten Seitenwechsel

Bibliothek

SSGOI

Für: Web-Apps, PWAs, WebView-Apps

Technik: Web Animations API mit echtem DOM

Downloads: 4.457 pro Woche

Browser-Schnittstelle

View Transition API

Für: einfache Überblendungen und geteilte Elemente

Technik: Momentaufnahmen in Pseudo-Elementen

Firefox: ab Version 144

Bibliothek

swup

Für: serverseitig gerenderte Websites

Lizenz: MIT

Downloads: 46.103 pro Woche

Ein guter Seitenübergang erklärt die Navigation besser als jeder Zurück-Pfeil. Ein Schalter für Menschen, denen Bewegung schadet, gehört trotzdem dazu.
Markus Seyfferth, Chefredakteur Dr. Web

Für wen lohnt sich SSGOI?

SSGOI lohnt sich für Agenturen und Inhouse-Teams, die eine Web-App, PWA oder WebView-App wie eine native App wirken lassen wollen. Klassische Websites mit Seitenneuladen bedient die ältere Bibliothek swup, für einfache Überblendungen reicht die View Transition API.

Unternehmen, die zwischen nativer App und hybridem Tech-Stack abwägen, bekommen mit SSGOI ein Argument für die Web-Variante. Fehlt im Team die Erfahrung, hilft der Vergleich von App-Entwicklungsagenturen.

Die Verbreitung bleibt überschaubar: Das Kernpaket kam vom 5. bis 11. Oktober auf 4.457 Downloads, swup auf 46.103.^[5] Von den Code-Beiträgen auf GitHub stammen 404 von einem einzigen Konto, der nächste Mitwirkende kommt auf 11.^[6] Das Projekt hängt damit an einer Person. Weil der Router bleibt, hält sich ein späterer Rückbau in Grenzen.

Bei der Barrierefreiheit fehlt ein Baustein: Im Code der Pakete @ssgoi/core und @ssgoi/react in Version 7.4.1 fand die Redaktion keine Abfrage der Einstellung prefers-reduced-motion. Das WCAG-Kriterium 2.3.3 verlangt, dass sich durch Interaktion ausgelöste Bewegung abschalten lässt, gehört aber zur höchsten Stufe AAA.^[7] Weil solche Effekte Übelkeit auslösen können, sollten Entwickler die Einstellung per matchMedia abfragen und die Übergänge abschalten. Den Rahmen erklärt der Ratgeber zur barrierefreien Website.