{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "clip-path-reveal-seite",
 "name": "Clip-Path-Reveal der neuen Seite (Inset, Kreis, Polygon)",
 "name_en": "Clip-path page reveal",
 "kurz": "Die neue Seite schneidet sich mit harter Kante über die alte: als Polygon von unten, als Fenster aus der Mitte oder als Kreis vom Klickpunkt.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "editorial",
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "editorial",
  "präzise",
  "luxuriös"
 ],
 "technik": [
  "css",
  "clip-path",
  "gsap",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Beim Seitenwechsel liegt die neue Seite über der alten und wird per clip-path aufgedeckt. Die alte Seite bleibt stehen oder weicht leicht zurück: Sie rutscht nach oben, skaliert auf 0.95 oder wird dunkler. Gängige Formen: Kante von unten (inset(100% 0 0 0) oder polygon auf volle Fläche), Fenster aus der Mitte (inset(20% 40%) auf inset(0)) und Kreis vom Klickpunkt (circle(0 at x y) auf einen Radius bis zur fernsten Ecke). Gleichzeitig schrumpfen die Bilder der neuen Seite von 1.1 bis 1.3 auf 1.0.",
  "warum_es_wirkt": "Harte, präzise Kanten statt Weichzeichnung wirken redaktionell und teuer. Die wachsende Maske und das schrumpfende Bild laufen gegeneinander. Das erzeugt Tiefe ohne 3D.",
  "wann_einsetzen": "Bei bildstarken Seiten wie Portfolios, Agenturen und Magazinen. Der Kreis vom Klickpunkt passt zu Themenwechseln (Hell/Dunkel) und CTA-Klicks, weil er sichtbar an der Handlung ansetzt.",
  "wann_nicht": "Wenn die neue Seite nicht oben beginnt. Ohne Scroll-Reset deckt die Maske einen falschen Ausschnitt auf. Auch nicht bei sehr häufigen Wechseln in Werkzeugen und Formularen: 800 ms bremsen dort.",
  "varianten": [
   "Polygon oder Inset von unten, alte Seite rutscht nach oben (Thibault Guignand)",
   "Fenster aus der Mitte mit Rundung, alte Seite skaliert auf 0.95 (ähnlich COLLINS)",
   "Kreis vom Cursor oder Tap-Punkt",
   "Von oben nach unten: inset(0 0 100% 0) auf inset(0), 0,8 s power2.out (Green Stack, Menübilder)"
  ],
  "umsetzung": "Nativ mit View Transitions: ::view-transition-old(root) { animation: none } und ::view-transition-new(root) { animation: reveal .8s cubic-bezier(.87,0,.13,1) both } mit @keyframes reveal { from { clip-path: inset(100% 0 0 0) } }. Für Seiten mit echtem Seitenwechsel (MPA) zusätzlich @view-transition { navigation: auto; } in beiden Seiten. Für den Kreis die Klickkoordinaten als CSS-Variablen auf <html> setzen (beim Klick oder im pageswap-Event). Ohne View Transitions: neue Seite als position: fixed-Ebene über die alte legen, clip-path per Web Animations oder GSAP tweenen und die Bilder darin gegenläufig skalieren. Die alte Seite vorher auf Viewport-Größe einfrieren (Inhalt um scrollY versetzen), danach entfernen und auf 0 scrollen. Fallstrick: clip-path-Formen interpolieren nur bei gleicher Art und gleicher Punktzahl, Polygone brauchen identische Vertex-Anzahl.",
  "mobil": "Gut geeignet. Der Kreis startet auch am Tap-Punkt. Das Fenster aus der Mitte ist auf schmalen Bildschirmen anfangs sehr schmal, wirkt aber trotzdem klar.",
  "reduzierte_bewegung": "Clip-Path und Bewegung abschalten, die neue Seite in 150 bis 200 ms per Opacity einblenden.",
  "barrierefreiheit": "Nach dem Wechsel den Fokus auf die Hauptüberschrift der neuen Seite setzen (tabindex=\"-1\"), die alte Seite während des Übergangs inert schalten. Bei Tastaturbedienung den Kreis von der Mitte des Links starten."
 },
 "messwerte": {
  "easing": "cubic-bezier(.87,0,.13,1) (Thibault); cubic-bezier(.5,.3,0,1) (Collins)",
  "dauer_ms": "800 (Thibault); 450 (Collins)",
  "stagger_ms": "",
  "distanz": "neu: clip-path polygon von unten 0 → 100 %; alt: translateY 0 → -35 %, opacity 1 → .5 (Thibault)",
  "sonstiges": "Collins: clip-path xywh(… round 1.5rem) auf round 0, alte Seite scale .95 mit 1rem Rundung; beides über ::view-transition-old/new(root)",
  "herkunft": "beobachtet",
  "quelle": "https://www.thibaultguignand.com/assets/index-BKlZLtrc.js"
 },
 "kurve": {
  "bezier": [
   0.87,
   0.0,
   0.13,
   1.0
  ],
  "css": "cubic-bezier(0.87, 0, 0.13, 1)",
  "name": "expo.inOut",
  "dauer_ms": 800
 },
 "gesehen_bei": [
  {
   "seite": "Thibault Guignand Portfolio",
   "url": "https://www.thibaultguignand.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle index-BKlZLtrc.js): @keyframes move-in deckt die neue Seite per clip-path polygon von unten auf (polygon(0 100%,100% 100%,100% 100%,0 100%) → volle Fläche), move-out schiebt die alte Seite auf translateY(-35%) und opacity .5; ::view-transition-old/new(root) je .8s cubic-bezier(.87,0,.13,1), startViewTransition (SPA), reduced-motion-Regel vorhanden.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Green Stack (Codrops-Fallstudie)",
   "url": "https://tympanus.net/codrops/2025/03/26/design-in-motion-the-animation-principles-behind-green-stack/",
   "auszeichnung": "",
   "beobachtung": "Menübilder: Anzeigen mit inset(0 0 100% 0) auf inset(0 0 0% 0), Verbergen mit inset(0% 0 0 0) auf inset(100% 0 0 0), jeweils 0,8 s power2.out, also von oben nach unten.",
   "art": "artikel"
  },
  {
   "seite": "COLLINS",
   "url": "https://www.wearecollins.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (entry.DdWfn7dd.css): View Transition mit clip-path xywh(): neue Seite xywh(0 50% 100% 100% round 1.5rem) + translateY(50%) → xywh(0 0 100% 100% round 0); alte Seite skaliert auf .95 mit round 1rem; Dauer --view-transition-duration .45s, Easing cubic-bezier(.5,.3,0,1), Hintergrund der image-pair #000.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "From Shader Uniforms to Clip-Path Wipes: How GSAP Drives My Portfolio (Codrops, 05/2026)",
   "url": "https://tympanus.net/codrops/2026/05/06/from-shader-uniforms-to-clip-path-wipes-how-gsap-drives-my-portfolio/"
  },
  {
   "titel": "Design in Motion: Green Stack (Codrops)",
   "url": "https://tympanus.net/codrops/2025/03/26/design-in-motion-the-animation-principles-behind-green-stack/"
  }
 ],
 "kombinierbar_mit": [
  "vt-cross-document-mpa",
  "parallel-crossfade-preload",
  "scroll-naechstes-projekt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/clip-path-reveal-seite/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/clip-path-reveal-seite/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/clip-path-reveal-seite/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Thibault-Eintrag gleicher URL jetzt live geprüft (art website); Collins neu."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die neue Seite schneidet sich mit harter Kante über die alte: als Polygon von unten, als Fenster aus der Mitte oder als Kreis vom Klickpunkt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.87, 0, 0.13, 1)",
   "dauer_ms": 800,
   "gegenbewegung": "Bilder der neuen Seite scale 1.2 → 1, 1000 ms, gleiche Kurve",
   "polygon_neu": "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%) → polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
   "polygon_alt": "translateY(0 → -35 % der Viewport-Höhe), opacity 1 → 0.5",
   "inset_neu": "inset(20% 40% round 24px) → inset(0% 0% round 0px)",
   "inset_alt": "scale 1 → 0.95, border-radius 0 → 16px, opacity 1 → 0.6",
   "kreis_neu": "circle(0px at x y) → circle(r at x y), x/y = Klickpunkt, r = Abstand zur fernsten Viewport-Ecke (Math.hypot)",
   "kreis_alt": "bleibt stehen",
   "hintergrund": "#0b0b0a hinter beiden Seiten",
   "reduziert": "opacity 0 → 1, 180 ms linear",
   "hover_karte": "Bild scale 1 → 1.04, 900 ms cubic-bezier(0.16, 1, 0.3, 1)"
  },
  "ausloeser": "klick",
  "touch": "Tippen auf Projektkarte, Zurück oder Nächstes Projekt löst den Wechsel aus; der Kreis startet am Tap-Punkt. Hover-Zoom der Karten entfällt, Pfeile sind immer sichtbar, Umschalter mit 34 px hohen Knöpfen.",
  "reduziert": "Kein Clip-Path, keine Bewegung der alten Seite, kein Scale: die neue Seite blendet in 180 ms linear ein. Werte-Anzeige nennt das.",
  "korrekturen": {
   "beschreibung": "Beim Seitenwechsel liegt die neue Seite über der alten und wird per clip-path aufgedeckt. Die alte Seite bleibt stehen oder weicht leicht zurück: Sie rutscht nach oben, skaliert auf 0.95 oder wird dunkler. Gängige Formen: Kante von unten (inset(100% 0 0 0) oder polygon auf volle Fläche), Fenster aus der Mitte (inset(20% 40%) auf inset(0)) und Kreis vom Klickpunkt (circle(0 at x y) auf einen Radius bis zur fernsten Ecke). Gleichzeitig schrumpfen die Bilder der neuen Seite von 1.1 bis 1.3 auf 1.0.",
   "warum_es_wirkt": "Harte, präzise Kanten statt Weichzeichnung wirken redaktionell und teuer. Die wachsende Maske und das schrumpfende Bild laufen gegeneinander. Das erzeugt Tiefe ohne 3D.",
   "wann_einsetzen": "Bei bildstarken Seiten wie Portfolios, Agenturen und Magazinen. Der Kreis vom Klickpunkt passt zu Themenwechseln (Hell/Dunkel) und CTA-Klicks, weil er sichtbar an der Handlung ansetzt.",
   "wann_nicht": "Wenn die neue Seite nicht oben beginnt. Ohne Scroll-Reset deckt die Maske einen falschen Ausschnitt auf. Auch nicht bei sehr häufigen Wechseln in Werkzeugen und Formularen: 800 ms bremsen dort.",
   "varianten": [
    "Polygon oder Inset von unten, alte Seite rutscht nach oben (Thibault Guignand)",
    "Fenster aus der Mitte mit Rundung, alte Seite skaliert auf 0.95 (ähnlich COLLINS)",
    "Kreis vom Cursor oder Tap-Punkt",
    "Von oben nach unten: inset(0 0 100% 0) auf inset(0), 0,8 s power2.out (Green Stack, Menübilder)"
   ],
   "umsetzung": "Nativ mit View Transitions: ::view-transition-old(root) { animation: none } und ::view-transition-new(root) { animation: reveal .8s cubic-bezier(.87,0,.13,1) both } mit @keyframes reveal { from { clip-path: inset(100% 0 0 0) } }. Für Seiten mit echtem Seitenwechsel (MPA) zusätzlich @view-transition { navigation: auto; } in beiden Seiten. Für den Kreis die Klickkoordinaten als CSS-Variablen auf <html> setzen (beim Klick oder im pageswap-Event). Ohne View Transitions: neue Seite als position: fixed-Ebene über die alte legen, clip-path per Web Animations oder GSAP tweenen und die Bilder darin gegenläufig skalieren. Die alte Seite vorher auf Viewport-Größe einfrieren (Inhalt um scrollY versetzen), danach entfernen und auf 0 scrollen. Fallstrick: clip-path-Formen interpolieren nur bei gleicher Art und gleicher Punktzahl, Polygone brauchen identische Vertex-Anzahl.",
   "mobil": "Gut geeignet. Der Kreis startet auch am Tap-Punkt. Das Fenster aus der Mitte ist auf schmalen Bildschirmen anfangs sehr schmal, wirkt aber trotzdem klar.",
   "reduzierte_bewegung": "Clip-Path und Bewegung abschalten, die neue Seite in 150 bis 200 ms per Opacity einblenden.",
   "barrierefreiheit": "Nach dem Wechsel den Fokus auf die Hauptüberschrift der neuen Seite setzen (tabindex=\"-1\"), die alte Seite während des Übergangs inert schalten. Bei Tastaturbedienung den Kreis von der Mitte des Links starten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Neue Welt (01.11.2026): erfundenes Architekturbüro „Lindgren Weiss Architekten, Bremen“ (Wohnungsbau, Bauen im Bestand) nach Rezept „architektur-ruhiges-raster“: nur Hanken Grotesk (variabel, 430/500, Kursiv statt Fett), Weiß, Hellgrau #E1E3E3, Dunkel #1F2323, Text #231F20, Fokus #0022FF; Bildunterschriften „Titel • Ort • Jahr“. Übersicht mit vier Projekten (Neubau Wohnhof Hulsberg, Speicher am Holzhafen, Aufstockung Gartenstadt Vahr, Stadthaus Ostertor), Bilder sind eigene SVG-Ansichten der Fassaden (keine medien/-Bilder). Klick auf Karte, Zurück oder Nächstes Projekt deckt die neue Seite auf; Umschalter Polygon/Inset/Kreis, Werte-Anzeige zeigt beim Kreis die echten Koordinaten. Seitenwechsel simuliert mit zwei fixierten Ebenen und Web Animations (für die Gegenbewegung der Bilder); im echten Einsatz ::view-transition-new(root) bzw. @view-transition für MPA. Vorführung: gedachter Zeiger klickt abwechselnd Projekt und Zurück, Varianten im Wechsel. Bewegungswerte unverändert. Zugang 02.11.2026: --leise color-mix 56 % → 66 % der Seitenfarbe (5,3:1 auf Weiß, 4,7:1 auf #e1e3e3, 6,8:1 auf den dunklen Seiten); Knopf-Rahmen im Kontrastmodus."
 }
}