{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "pinned-scrub-scrollytelling",
 "name": "Gepinnte Scrub-Sequenz (Scrollytelling)",
 "name_en": "Pinned scroll-scrubbed timeline / scrollytelling",
 "kurz": "Eine Logo-Fallstudie in vier Kapiteln: Die Bühne bleibt stehen, der Scroll zeichnet, färbt und enthüllt das fertige Zeichen und spult beim Zurückscrollen exakt zurück.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "editorial",
  "präzise",
  "filmisch"
 ],
 "stimmung_roh": [
  "editorial",
  "filmisch",
  "erklärend",
  "technisch"
 ],
 "technik": [
  "gsap",
  "scrolltrigger",
  "scroll-driven-css",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine Section mit 100vh wird an der Oberkante fixiert (pin). Während man eine festgelegte Strecke weiterscrollt, etwa 200 bis 400 % der Viewporthöhe, läuft eine Timeline mit mehreren Schritten synchron zum Scrollbalken: Headline wechselt, Bild skaliert, Zahlen zählen hoch, Ebenen schieben sich ein. Am Ende der Strecke wird die Section freigegeben und der folgende Inhalt schiebt nach. Rückwärts scrollen spult die Timeline exakt zurück.",
  "warum_es_wirkt": "Der Nutzer bestimmt das Tempo selbst und erlebt die Abfolge wie einen Film. Nichts fliegt am Rand vorbei. Der feste Bildausschnitt bündelt den Blick und trägt auch Vorher-nachher-Erklärungen.",
  "wann_einsetzen": "Produkt- und Prozesserklärungen, Kapitel einer Case Study, Jahresberichte, ein Portfolio-Intro mit drei bis fünf klaren Schritten.",
  "wann_nicht": "Bei langen Lesetexten und Formularen oder wenn der Inhalt auch ohne Choreografie verständlich ist. Höchstens ein bis zwei solcher Sequenzen pro Seite, sonst fühlt sich die Seite gefangen an.",
  "varianten": [
   "Kapitel-Sequenz mit snap auf die Timeline-Labels",
   "Split-Screen: Der Text scrollt normal, das Bild daneben bleibt sticky und wechselt pro Textblock",
   "Nur CSS: position: sticky und view-timeline auf dem hohen Wrapper, animation-range: contain 0% contain 100%",
   "Zahlen- und Diagramm-Story: Zähler und SVG-Balken hängen am Scroll"
  ],
  "umsetzung": "gsap.timeline({ scrollTrigger: { trigger: '.story', pin: true, start: 'top top', end: '+=200%', scrub: 0.6, anticipatePin: 1 } }) mit ease: 'none' für alle Schritte. Kapitel mit tl.addLabel('k2') trennen; für Einrasten snap: { snapTo: 'labels', duration: { min: 0.2, max: 0.6 }, ease: 'power3' } ergänzen. Ein Pin pro ScrollTrigger. pinSpacing ist standardmäßig an, in display:flex-Eltern aus. Fallstricke: Ein Pin in transformierten Eltern bricht. Bilder ohne feste Höhe verschieben Start und Ende, daher ScrollTrigger.refresh() nach dem Laden von Bildern und Schriften. Mobil mit gsap.matchMedia() eine kürzere Strecke oder keinen Pin wählen. CSS-Variante: Wrapper height: 400vh, Kind position: sticky; top: 0, Animationen mit animation-timeline: --story und animation-range: contain 0% contain 100%.",
  "mobil": "Strecke kürzen, etwa 150 bis 200 % (TRIONN nutzt auf Touch +=150 %). normalizeScroll nur bei springender Adressleiste einsetzen. Auf sehr kleinen Bildschirmen den Pin aufheben und die Schritte untereinander stapeln.",
  "reduzierte_bewegung": "Pin aufheben und die Schritte als statische Abfolge untereinander zeigen. Zustandswechsel als Überblendung ohne Bewegung.",
  "barrierefreiheit": "Alle Inhalte im DOM lassen, nicht nur im Canvas. Kapitelüberschriften als echte h2 oder h3. Tastaturnutzer müssen die Sequenz mit Pfeiltasten und Leertaste ohne Sprünge durchlaufen können. Nichts darf nur über eine Scrollposition erreichbar sein, Kapitelmarken als Buttons helfen beim Anspringen."
 },
 "messwerte": {
  "easing": "none",
  "dauer_ms": "scrub .6 (Trionn) bzw. true (Huge)",
  "stagger_ms": "",
  "distanz": "Pin-Länge +=200 % (Trionn); innerHeight × (n-1) × .6 (Huge)",
  "sonstiges": "Huge: Rotation 14° je Karte auf Radius 90em",
  "herkunft": "beobachtet",
  "quelle": "https://trionn.com/_next/static/chunks/13xgo04nefn8q.js"
 },
 "kurve": {
  "bezier": [
   0.0,
   0.0,
   1.0,
   1.0
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "eigene Kurve",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Demo „Layout Formation on Scroll“ (Manoela Ilic)",
   "url": "https://tympanus.net/Development/OnScrollLayoutFormations/",
   "auszeichnung": "",
   "beobachtung": "Laut Codrops-Teaser wird Inhalt gepinnt, bis sich ein Bild-Layout per Scroll zusammengesetzt hat (Demo geöffnet, Verhalten aus Teasertext).",
   "art": "demo"
  },
  {
   "seite": "Lando Norris",
   "url": "https://landonorris.com",
   "auszeichnung": "Awwwards SOTD 17.11.2025 + Developer Award (Animations/Transitions 8,60)",
   "beobachtung": "Startseite mit Hinweisen ‚Back to scroll‘, ‚tap to lock‘ und ‚This is a vertical drive‘ sowie einer Fotostrecke mit Jahres-/Ort-Captions – scroll-geführte Erzählung; Detailverhalten nur aus statischem Markup erschlossen, im Browser prüfen.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Igloo Inc.",
   "url": "https://igloo.inc",
   "auszeichnung": "Awwwards SOTD 23.07.2024 + Developer Award (Animations/Transitions 9,60)",
   "beobachtung": "Aus Erinnerung (nicht verifiziert): durchgehende, scroll-gesteuerte 3D-Szene mit Kapiteln; statischer Abruf lieferte nur Metadaten.",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Huge",
   "url": "https://www.hugeinc.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 2iuon7aqn2-4w.js): [data-radial-cards-marquee-pin] wird gepinnt, die Kartenliste dreht auf einem Kreisbogen von 0 auf -Step × (n-1) (Step 14°, Radius 90em), Pin-Länge innerHeight × (n-1) × .6, scrub true.",
   "art": "website"
  },
  {
   "seite": "TRIONN",
   "url": "https://trionn.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 13xgo04nefn8q.js): Keyfacts-Timeline start top top, end +=200 % (Touch +=150 %), pin true, anticipatePin 1, scrub .6, ease none.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP ScrollTrigger Doku (pin, scrub, snap)",
   "url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/"
  },
  {
   "titel": "Scroll-driven Animations (Chrome Developers)",
   "url": "https://developer.chrome.com/docs/css-ui/scroll-driven-animations"
  }
 ],
 "kombinierbar_mit": [
  "scroll-word-highlight",
  "medien-expansion-scroll",
  "theme-farbwechsel-scroll",
  "scroll-fortschritt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/pinned-scrub-scrollytelling/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/pinned-scrub-scrollytelling/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/pinned-scrub-scrollytelling/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei weitere Produktionsbelege neben Lando Norris."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Logo-Fallstudie in vier Kapiteln: Die Bühne bleibt stehen, der Scroll zeichnet, färbt und enthüllt das fertige Zeichen und spult beim Zurückscrollen exakt zurück.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0"
  ],
  "werte": {
   "pin": "true, Trigger ist die 100svh-Section, pinSpacing Standard (an)",
   "start": "top top",
   "end": "+=200% (Touch-Geräte +=150%)",
   "scrub": 0.6,
   "anticipatePin": 1,
   "easing": "none (alle Schritte in der Timeline linear, cubic-bezier(0, 0, 1, 1))",
   "timeline": "Dauer 3, Labels k1 0 · k2 1 · k3 2 · k4 3; jeder Übergang liegt zwischen Label − 0.85 und Label − 0.15, um jedes Label 0.15 Haltezone",
   "schritte": "01→02: Zitat raus (y −30 px) 0.3, Raster ein 0.3, Bohnenkreis zeichnen (stroke-dashoffset 1→0, pathLength 1) 0.45, Kerbe 0.2 · 02→03: Ziegel-Fläche wischt von unten ein (clip-path inset(100% 0 0 0) → 0) 0.4, Kreis Tinte → Creme, Füllung Bohne #261815, Kerbe → Ziegel, Wortmarke letter-spacing 0.6em → 0.22em 0.45, Farbmuster stagger 0.08 · 03→04: Bild der fertigen Marke öffnet sich aus der Kapsel inset(34% 37% 30% 37% round 999px) → inset(0), scale 1.12 → 1 in 0.6, Zähler 0 → 14 / 3 / 1 in 0.5",
   "texte": "altes Kapitel autoAlpha 0, y −40 px in 0.3; neues Kapitel Kinder y 48 px → 0, stagger 0.06",
   "snap_variante": "snap: { snapTo: 'labels', duration: { min: 0.2, max: 0.6 }, ease: 'power3' }",
   "split_variante": "Bühne position: sticky (top 11svh, Höhe 78svh), Kapitel min-height 78svh, aktiv ab 'top 58%', Wechsel per tl.tweenTo(label) 1.2 s expo.out",
   "farben": "Papier #ece8de, Tinte #1f272a, Ziegel #d14129, Bohne #261815, Creme #f3e8d6, Akzent #e2674c",
   "vorfuehrung": "Selbst-Scroll: 0.9 s Halt je Kapitel, 1.5 s Fahrt (smoothstep), 2.2 s zurückspulen"
  },
  "ausloeser": "scroll",
  "touch": "Gleiche gepinnte Sequenz mit kürzerer Strecke (+=150 %, Wert von TRIONN für Touch); Text oben, Bühne darunter. Split-Screen: Bühne klebt oben (46svh), Text scrollt darunter durch.",
  "reduziert": "Kein Pin: Split-Screen-Layout ist fest gesetzt, die anderen Varianten sind gesperrt. Kapitel stehen untereinander, die Bühne springt per seek auf den Kapitelzustand und blendet in 0.25 s linear über.",
  "korrekturen": {
   "beschreibung": "Eine Section mit 100vh wird an der Oberkante fixiert (pin). Während man eine festgelegte Strecke weiterscrollt, etwa 200 bis 400 % der Viewporthöhe, läuft eine Timeline mit mehreren Schritten synchron zum Scrollbalken: Headline wechselt, Bild skaliert, Zahlen zählen hoch, Ebenen schieben sich ein. Am Ende der Strecke wird die Section freigegeben und der folgende Inhalt schiebt nach. Rückwärts scrollen spult die Timeline exakt zurück.",
   "warum_es_wirkt": "Der Nutzer bestimmt das Tempo selbst und erlebt die Abfolge wie einen Film. Nichts fliegt am Rand vorbei. Der feste Bildausschnitt bündelt den Blick und trägt auch Vorher-nachher-Erklärungen.",
   "wann_einsetzen": "Produkt- und Prozesserklärungen, Kapitel einer Case Study, Jahresberichte, ein Portfolio-Intro mit drei bis fünf klaren Schritten.",
   "wann_nicht": "Bei langen Lesetexten und Formularen oder wenn der Inhalt auch ohne Choreografie verständlich ist. Höchstens ein bis zwei solcher Sequenzen pro Seite, sonst fühlt sich die Seite gefangen an.",
   "varianten": [
    "Kapitel-Sequenz mit snap auf die Timeline-Labels",
    "Split-Screen: Der Text scrollt normal, das Bild daneben bleibt sticky und wechselt pro Textblock",
    "Nur CSS: position: sticky und view-timeline auf dem hohen Wrapper, animation-range: contain 0% contain 100%",
    "Zahlen- und Diagramm-Story: Zähler und SVG-Balken hängen am Scroll"
   ],
   "umsetzung": "gsap.timeline({ scrollTrigger: { trigger: '.story', pin: true, start: 'top top', end: '+=200%', scrub: 0.6, anticipatePin: 1 } }) mit ease: 'none' für alle Schritte. Kapitel mit tl.addLabel('k2') trennen; für Einrasten snap: { snapTo: 'labels', duration: { min: 0.2, max: 0.6 }, ease: 'power3' } ergänzen. Ein Pin pro ScrollTrigger. pinSpacing ist standardmäßig an, in display:flex-Eltern aus. Fallstricke: Ein Pin in transformierten Eltern bricht. Bilder ohne feste Höhe verschieben Start und Ende, daher ScrollTrigger.refresh() nach dem Laden von Bildern und Schriften. Mobil mit gsap.matchMedia() eine kürzere Strecke oder keinen Pin wählen. CSS-Variante: Wrapper height: 400vh, Kind position: sticky; top: 0, Animationen mit animation-timeline: --story und animation-range: contain 0% contain 100%.",
   "mobil": "Strecke kürzen, etwa 150 bis 200 % (TRIONN nutzt auf Touch +=150 %). normalizeScroll nur bei springender Adressleiste einsetzen. Auf sehr kleinen Bildschirmen den Pin aufheben und die Schritte untereinander stapeln.",
   "reduzierte_bewegung": "Pin aufheben und die Schritte als statische Abfolge untereinander zeigen. Zustandswechsel als Überblendung ohne Bewegung.",
   "barrierefreiheit": "Alle Inhalte im DOM lassen, nicht nur im Canvas. Kapitelüberschriften als echte h2 oder h3. Tastaturnutzer müssen die Sequenz mit Pfeiltasten und Leertaste ohne Sprünge durchlaufen können. Nichts darf nur über eine Scrollposition erreichbar sein, Kapitelmarken als Buttons helfen beim Anspringen."
  },
  "geprueft": "31.10.2026",
  "notiz": "Fallstudie eines erfundenen Studios für die Kaffeerösterei Röstkontor: Briefing-Zitat, Konstruktionsskizze, Farbe und Wortmarke, dann öffnet sich das fertige Markenbild aus medien/ deckungsgleich über der Skizze (SVG mit preserveAspectRatio slice passt zu object-fit: cover). Umschalter Scrub, Kapitel-Snap, Split-Screen. Live-Anzeige zeigt Scroll- gegen Timeline-Fortschritt, so wird die Glättung durch scrub 0.6 sichtbar. Kapitelmarken unten sind Buttons und springen per Scroll an die Labels. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: Zitat-Quelle Alpha .6 auf .7 (4,8:1), niedrige Fenster unter 760 × 500 px (200 % Zoom) setzen Text und Bühne nebeneinander mit kleineren Schriftgraden, damit das Zitat in die Bühne passt; Knopfrahmen im Kontrastmodus."
 }
}