{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "scroll-naechstes-projekt",
 "name": "Scroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)",
 "name_en": "Scroll-driven next-project transition",
 "kurz": "Weiterscrollen öffnet das Bild des nächsten Projekts bis zum Vollbild, dann wechselt die Seite unsichtbar.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "editorial",
  "filmisch"
 ],
 "stimmung_roh": [
  "editorial",
  "fließend",
  "filmisch"
 ],
 "technik": [
  "gsap",
  "scrolltrigger",
  "clip-path",
  "svg",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Am Ende einer Case Study steht der Teaser des nächsten Projekts. Sein Bild ist per clip-path inset auf ein schmales Fenster beschnitten und vergrößert. Weiteres Scrollen öffnet das Fenster bis zum Vollbild und skaliert das Bild auf 1. Ein Fortschrittsring (SVG stroke-dashoffset) füllt sich dabei. Bei 100 % wechselt die Seite von selbst zum nächsten Projekt. Dessen Hero sieht genau aus wie der Endzustand, deshalb bemerkt man den Wechsel kaum.",
  "warum_es_wirkt": "Die Lektüre geht ohne Klick weiter. Der Nutzer bestimmt das Tempo selbst und spürt den Übergang als Bewegung, nicht als Ladepause. Weil Endzustand und neuer Hero deckungsgleich sind, wirken zwei Seiten wie eine.",
  "wann_einsetzen": "Bei Portfolios mit einer Abfolge von Case Studies, bei Editorial-Serien und Lookbooks. Auch bei Exposés, die man nacheinander durchblättert.",
  "wann_nicht": "Wenn Nutzer am Seitenende Footer, Kontakt oder rechtliche Links erreichen müssen und diese nicht vor dem Teaser stehen. Der Footer darf nicht unerreichbar werden.",
  "varianten": [
   "Automatischer Wechsel nach Schwelle, mit Ring und scrub 1 (Thibault Guignand)",
   "Klick-Bestätigung statt automatischem Wechsel",
   "Linear an den Scroll gekoppelt, mit Fortschrittsbalken neben „Scroll Down“, Sektion 200 vh, Inhalt sticky (Locomotive)",
   "Natives Scrubben einer View Transition über currentTime (Bramus Van Damme, CSS Day 2026)",
   "Scroll-Effekt mit Seitenübergang nach einem Dribbble-Shot von Vitalii Burhonskyi (Codrops)"
  ],
  "umsetzung": "Teaser-Sektion 200 vh hoch, Inhalt sticky (oder ScrollTrigger mit pin, end '+=100%'). ScrollTrigger mit start 'top top' und scrub 1. Pro Update mit p = self.progress: clipPath = inset(max(0, 20 - 20p)% max(0, 40 - 40p)%), Bild scale = 1.3 - 0.3p, Ring strokeDashoffset = Umfang · (1 - p). Gewechselt wird nur, wenn p > 0,99 ist, die Scroll-Geschwindigkeit unter 2000 px/s liegt und vorher einmal p < 0,2 erreicht wurde. Dann nach 250 ms navigieren. Der Hero der Zielseite muss in Größe, Bildausschnitt und Titelposition dem Endzustand gleichen. Für echte Seitenwechsel auf beiden Seiten @view-transition { navigation: auto; } setzen und per location.href zur nächsten URL gehen. Fallstricke: ScrollTrigger nach dem Wechsel aufräumen, ebenso Lenis, falls ein Eigenprojekt es nutzt (optional, standardmäßig aus; viele Rezepte schließen es aus). Kein Auto-Wechsel bei schnellem Flick-Scroll (Velocity-Grenze).",
  "mobil": "Mit nativem Touch-Scroll gut. Den automatischen Wechsel hier besser durch einen Button „Nächstes Projekt“ ersetzen, damit niemand versehentlich wechselt. Das Fenster breiter anlegen, sonst wird es auf schmalen Bildschirmen zum Schlitz.",
  "reduzierte_bewegung": "Statischer Teaser mit Link, ohne Scrub und ohne automatischen Wechsel.",
  "barrierefreiheit": "Immer einen echten Link zum nächsten Projekt anbieten, für Tastatur und Screenreader. Footer und rechtliche Links vor dem Teaser platzieren, damit sie erreichbar bleiben. Den doppelten Titel im Teaser-Bild mit aria-hidden ausblenden."
 },
 "messwerte": {
  "easing": "linear (scrollgekoppelt über data-scroll-css-progress)",
  "dauer_ms": "Scramble 250 (16 Schritte)",
  "stagger_ms": "",
  "distanz": "Sektion 200 vh, Auslöse-Offset 0 bis 110 %",
  "sonstiges": "Fortschrittsbalken neben \"Scroll Down\"",
  "herkunft": "beobachtet",
  "quelle": "https://locomotive.ca/assets/styles/main.css?v=1792099941132"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Thibault Guignand Portfolio",
   "url": "https://www.thibaultguignand.com/",
   "auszeichnung": "",
   "beobachtung": "Next-Project-Morph mit scrub:1: Hintergrund-Scale 1.3 auf 1.0, inset-Clip vertikal max(0,20-20p)% und horizontal max(0,40-40p)%, SVG-Kreis per strokeDashoffset. Auto-Navigation mit 250 ms Commit-Timeout, Velocity-Grenze 2000 und hasSeenLowProgress-Guard gegen versehentliches Durchrauschen.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Locomotive – Case Study K72",
   "url": "https://locomotive.ca/en/work/k72",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: article.c-work-next mit data-module-work-next, data-scroll-css-progress, data-scroll-offset=\"0,110%\", Text \"Next Project\" / \"Scroll Down\" und Fortschrittsbalken; main.css: .c-work-next min-height 200 vh, Container sticky bottom 0; Barba-Transition \"work-next\" mit Text-Scramble in 16 Schritten über .25s.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "From Shader Uniforms to Clip-Path Wipes (Codrops, 05/2026)",
   "url": "https://tympanus.net/codrops/2026/05/06/from-shader-uniforms-to-clip-path-wipes-how-gsap-drives-my-portfolio/"
  },
  {
   "titel": "Bramus Van Damme: Cranking View Transitions up to 11 (CSS Day 2026)",
   "url": "https://conffab.com/?p=10524"
  }
 ],
 "kombinierbar_mit": [
  "clip-path-reveal-seite",
  "vt-shared-element-morph"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zweiter Produktionsbeleg neben Thibault.",
   "02.11.2026: lenis aus technik genommen; die Demo lädt Lenis nicht, Lenis ist nur optional (siehe bau.werte.lenis)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Weiterscrollen öffnet das Bild des nächsten Projekts bis zum Vollbild, dann wechselt die Seite unsichtbar.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0"
  ],
  "werte": {
   "easing": "none (linear an den Scroll gekoppelt)",
   "scrub": "1 (Ring, Mit Klick) · true (Balken, ohne Nachlauf)",
   "scrolltrigger": "trigger Teaser-Sektion, start 'top top', end 'bottom bottom' (= 100svh Scrollweg)",
   "sektion": "height 200svh; Inhalt position: sticky; top: 0; height: 100svh",
   "clip_path": "inset(max(0, 20 - 20p)% max(0, 40 - 40p)%), also inset(20% 40%) → 0",
   "clip_path_mobil": "bis 640px: inset(22% 16%) → 0, gleiche Formel",
   "bild_scale": "1.3 - 0.3p (1,3 → 1), transform-origin Mitte",
   "ring": "r 34 in 76px-Box, Umfang 213,63, stroke-dashoffset = 213,63 · (1 - p), stroke 1,5px; Deckkraft ab p 0,85 bis 1 auf 0",
   "balken": "Breite clamp(90px, 14vw, 180px), 1px, scaleX(p)",
   "titel_im_fenster": "opacity (p - 0,55) / 0,45, begrenzt auf 0 bis 1",
   "label_und_fusszeile": "opacity max(0, 1 - 1,6p)",
   "wechsel_schwelle": 0.99,
   "wechsel_commit_ms": 250,
   "wechsel_velocity_max_px_s": 2000,
   "wechsel_vorher_niedrig": "p < 0,2 einmal gesehen (hasSeenLowProgress)",
   "geschwindigkeit": "eigene Messung aus scroll-Events, geglättet 0,6/0,4, nach 140 ms Ruhe = 0",
   "view_transition": "same-document, ::view-transition-old/new(root) 250ms linear; Kopf und Steuerung mit eigenem view-transition-name ohne Animation",
   "ankunft_hero": "Eckdaten opacity 0 → 1 und translate 8px → 0, 400ms cubic-bezier(0.165, 0.84, 0.44, 1), Versatz 60ms, Verzögerung 80ms",
   "knopf_bestaetigen": "opacity und scale 0,96 → 1, 400ms cubic-bezier(0.165, 0.84, 0.44, 1)",
   "ui_hover_ms": 200,
   "schriften": "Libre Caslon Display 400 (h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Zeilenhöhe 1.08, Laufweite -0.005em); Hanken Grotesk (Text 1.0625rem/1.55, Labels 0.75rem versal +0.09em, Tabellenziffern); Geist Mono nur Demo-Steuerung",
   "farben": "#FCFAF5 Grund, #EFE8DF Sand, #02385C Marke, #313131 Text, #B5B2AF Linien, #ED7F1A nur CTA",
   "vorfuehrung": "500ms halten, 4000ms Selbst-Scroll durch den Teaser (Sinus in-out), Wechsel über die echten Wachen, 1700ms Hero, 2200ms zurück zum Teaser",
   "lenis": "optional, standardmäßig aus: Demo lädt kein Lenis, ScrollTrigger liest den nativen Scroll. Lenis nur im Eigenprojekt."
  },
  "ausloeser": "scroll",
  "touch": "Auf Touch-Geräten startet die Variante „Mit Klick“: Das Fenster öffnet sich mit nativem Scroll, ab p > 0,99 erscheint „Exposé öffnen“. Fenster dort inset(22% 16%), Titel darüber, Eckdaten als eine Zeile darunter. Der Link „Direkt zum Exposé“ steht immer da.",
  "reduziert": "Statischer Teaser ohne Sticky-Strecke und ohne Scrub (Fenster bleibt inset(20% 40%)), kein automatischer Wechsel. Der Knopf „Exposé öffnen“ wechselt ohne View Transition, die Eckdaten erscheinen mit 200ms Deckkraft.",
  "korrekturen": {
   "beschreibung": "Am Ende einer Case Study steht der Teaser des nächsten Projekts. Sein Bild ist per clip-path inset auf ein schmales Fenster beschnitten und vergrößert. Weiteres Scrollen öffnet das Fenster bis zum Vollbild und skaliert das Bild auf 1. Ein Fortschrittsring (SVG stroke-dashoffset) füllt sich dabei. Bei 100 % wechselt die Seite von selbst zum nächsten Projekt. Dessen Hero sieht genau aus wie der Endzustand, deshalb bemerkt man den Wechsel kaum.",
   "warum_es_wirkt": "Die Lektüre geht ohne Klick weiter. Der Nutzer bestimmt das Tempo selbst und spürt den Übergang als Bewegung, nicht als Ladepause. Weil Endzustand und neuer Hero deckungsgleich sind, wirken zwei Seiten wie eine.",
   "wann_einsetzen": "Bei Portfolios mit einer Abfolge von Case Studies, bei Editorial-Serien und Lookbooks. Auch bei Exposés, die man nacheinander durchblättert.",
   "wann_nicht": "Wenn Nutzer am Seitenende Footer, Kontakt oder rechtliche Links erreichen müssen und diese nicht vor dem Teaser stehen. Der Footer darf nicht unerreichbar werden.",
   "varianten": [
    "Automatischer Wechsel nach Schwelle, mit Ring und scrub 1 (Thibault Guignand)",
    "Klick-Bestätigung statt automatischem Wechsel",
    "Linear an den Scroll gekoppelt, mit Fortschrittsbalken neben „Scroll Down“, Sektion 200 vh, Inhalt sticky (Locomotive)",
    "Natives Scrubben einer View Transition über currentTime (Bramus Van Damme, CSS Day 2026)",
    "Scroll-Effekt mit Seitenübergang nach einem Dribbble-Shot von Vitalii Burhonskyi (Codrops)"
   ],
   "umsetzung": "Teaser-Sektion 200 vh hoch, Inhalt sticky (oder ScrollTrigger mit pin, end '+=100%'). ScrollTrigger mit start 'top top' und scrub 1. Pro Update mit p = self.progress: clipPath = inset(max(0, 20 - 20p)% max(0, 40 - 40p)%), Bild scale = 1.3 - 0.3p, Ring strokeDashoffset = Umfang · (1 - p). Gewechselt wird nur, wenn p > 0,99 ist, die Scroll-Geschwindigkeit unter 2000 px/s liegt und vorher einmal p < 0,2 erreicht wurde. Dann nach 250 ms navigieren. Der Hero der Zielseite muss in Größe, Bildausschnitt und Titelposition dem Endzustand gleichen. Für echte Seitenwechsel auf beiden Seiten @view-transition { navigation: auto; } setzen und per location.href zur nächsten URL gehen. Fallstricke: ScrollTrigger nach dem Wechsel aufräumen, ebenso Lenis, falls ein Eigenprojekt es nutzt (optional, standardmäßig aus; viele Rezepte schließen es aus). Kein Auto-Wechsel bei schnellem Flick-Scroll (Velocity-Grenze).",
   "mobil": "Mit nativem Touch-Scroll gut. Den automatischen Wechsel hier besser durch einen Button „Nächstes Projekt“ ersetzen, damit niemand versehentlich wechselt. Das Fenster breiter anlegen, sonst wird es auf schmalen Bildschirmen zum Schlitz.",
   "reduzierte_bewegung": "Statischer Teaser mit Link, ohne Scrub und ohne automatischen Wechsel.",
   "barrierefreiheit": "Immer einen echten Link zum nächsten Projekt anbieten, für Tastatur und Screenreader. Footer und rechtliche Links vor dem Teaser platzieren, damit sie erreichbar bleiben. Den doppelten Titel im Teaser-Bild mit aria-hidden ausblenden."
  },
  "geprueft": "01.11.2026",
  "notiz": "Exposé-Seite des erfundenen Regensburger Maklers „Ostner & Paulus“ (Rezept immobilien-diskret-hochwertig; passt, weil das Rezept Exposé → nächstes Objekt vorsieht). Drei Objekte im Kreis (Patrizierturm, Stadtvilla Kumpfmühl, Speicherloft) als eigene SVG-Szenen mit Grundriss. Der Seitenwechsel ist simuliert: same-document View Transition, Inhalt neu gerendert, scrollTo(0), ScrollTrigger kill und neu. Echt: zwei HTML-Seiten mit @view-transition { navigation: auto; }. Footer steht vor dem Teaser. Varianten Ring automatisch (Thibault), Balken linear (Locomotive), Mit Klick. Kein Lenis (Rezept: nicht verwenden), Locomotives Text-Scramble weggelassen, weil es nicht zur Branche passt. Nachgebessert: Werte-Pult startet eingeklappt (data-fundus-pult=\"zu\"), weil es am Desktop rechts unten Hero, Preistabelle und Anfrage-Knopf verdeckte. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: --leise Alpha .62 → .72 (4,6:1 auch auf Sand); CTA „Besichtigung anfragen“ dunkle Schrift #1c1712 auf Orange (6,5:1, Weiß hatte 2,7:1), wie im Rezept immobilien; Kontrastmodus-Rahmen für Knöpfe. Offen: Zahl im Fortschrittsring (aria-hidden, weiß mit Schatten über dem Bild) misst die Prüfung gegen Sand. Korrektur 02.11.2026 (KI-Audit Befund 2): bau.werte.lenis „optional, standardmäßig aus“; die Demo lud nie Lenis (nur technik im Katalog nennt es), umsetzung formuliert Lenis als Ausnahme."
 }
}