{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "layout-formation-scroll",
 "name": "Raster/Layout formiert sich beim Scrollen",
 "name_en": "On-scroll grid assembly / sticky grid / On-scroll layout formation / grid assembly",
 "kurz": "Ein Monitoring-Dashboard setzt sich beim Scrollen zusammen: Neun Kacheln steigen in ihre Fächer, fliegen aus dem Chaos ein oder fächern sich aus einem Stapel auf, erst dann löst sich der Pin.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "editorial",
  "präzise",
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "konstruktiv",
  "dynamisch",
  "galerieartig",
  "kuratiert",
  "verspielt",
  "editorial"
 ],
 "technik": [
  "gsap",
  "scrolltrigger",
  "flip",
  "css-grid",
  "scroll-driven-css",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine Bildsektion wird gepinnt. Beim Scrollen fliegen die Rasterelemente aus unterschiedlichen Startpunkten an ihre Zielposition, etwa aus der Mitte, von den Rändern oder aus einem Stapel. Erst wenn das Raster vollständig ist, löst sich der Pin. Oft wird das fertige Raster danach zur Navigation, ein Klick öffnet das Projekt.",
  "warum_es_wirkt": "Das Layout selbst wird zur Animation. Aus Unordnung entsteht sichtbar Ordnung, das zeigt Konstruktion, Fülle und Kuratierung zugleich. Ein Galerie-Einstieg bekommt so eine Inszenierung.",
  "wann_einsetzen": "Portfolio- und Projektübersichten, Fotografie-Portfolios, Bildarchive, Kollektionen, Studio-Intros und Kampagnen mit vielen Motiven. Auch Produktübersichten, deren Module ein Gesamtbild ergeben, etwa ein Dashboard.",
  "wann_nicht": "Bei weniger als etwa acht Elementen. Wenn einzelne Bilder wichtig sind und schnell anklickbar sein müssen. Auf schwacher Hardware mit vielen Videos im Raster.",
  "varianten": [
   "Gepinnter Aufbau: Elemente steigen gestaffelt in ihre Fächer",
   "Zerstreut → Raster: zufällige Startpositionen und Drehungen",
   "Stapel → Raster: alle Elemente liegen in der Mitte und fächern sich auf",
   "Zoom-out vom Einzelbild zum Raster oder umgekehrt zum Vollbild",
   "Gegenläufige Spalten",
   "3D-Perspektiv-Raster: Elemente kippen in Position"
  ],
  "umsetzung": "Den Endzustand als normales CSS-Grid bauen. Den Startzustand relativ zur Endposition setzen, zum Beispiel alle Elemente in der Mitte gestapelt oder zufällige x, y und rotation. Dann eine gsap.timeline mit ScrollTrigger (pin, scrub) auf den Endzustand fahren: tl.fromTo(items, start, { x: 0, y: 0, rotation: 0, scale: 1, ease: 'power2.out', stagger: { each: 0.1, from: 'random' } }). Die Staffelung kann auch nach Abstand zur Mitte laufen (stagger: { grid: 'auto', from: 'center' }). Alternativ mit Flip: den Zustand des Streulayouts aufnehmen, Klasse umschalten und Flip.from scrollgekoppelt abspielen. Bilder mit festen Seitenverhältnissen einbinden, damit nichts springt. Fallstrick: Mit invalidateOnRefresh setzen from-Tweens, die noch nicht begonnen haben, nach einem Refresh ihren Startzustand nicht neu; besser fromTo nutzen und bei Größenänderung neu bauen.",
  "mobil": "Weniger Spalten und kürzerer Pin. Oder ganz ohne Pin: jedes Element einzeln einblenden, sobald es ins Bild kommt.",
  "reduzierte_bewegung": "Kein Pin, das Raster steht sofort im Endzustand.",
  "barrierefreiheit": "Die DOM-Reihenfolge entspricht dem Endlayout. Während des Pins keine fokussierbaren Elemente außerhalb des sichtbaren Bereichs. Bilder, die Projekte verlinken, brauchen einen Alternativtext."
 },
 "messwerte": {
  "easing": "power2.out (scrub)",
  "dauer_ms": "scrollgekoppelt",
  "stagger_ms": "100 (from random)",
  "distanz": "marginTop 100 % → 0",
  "sonstiges": "Codrops-Artikel nennt die Seite; Live-Code bestätigt",
  "herkunft": "beobachtet",
  "quelle": "https://cdn.prod.website-files.com/66601c7c6b0d48cf88bbe06c/67050947032a3d18164ce14f_sp-scripts.txt",
  "aus_eintrag": [
   "raster-formation-scroll"
  ]
 },
 "kurve": {
  "bezier": [
   0.33,
   1,
   0.68,
   1
  ],
  "css": "cubic-bezier(0.33, 1, 0.68, 1)",
  "name": "power2.out",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Stewart & Partners (Malvah Studio)",
   "url": "https://tympanus.net/codrops/2024/09/18/exploration-of-on-scroll-layout-formations/",
   "auszeichnung": "",
   "beobachtung": "Laut Codrops Inspirationsquelle für die gepinnte Raster-Animation: Inhalte bleiben fixiert, bis das Layout fertig aufgebaut ist.",
   "art": "artikel"
  },
  {
   "seite": "Codrops – Sticky Grid Scroll",
   "url": "https://tympanus.net/codrops/2026/03/02/sticky-grid-scroll-building-a-scroll-driven-animated-grid/",
   "auszeichnung": "Codrops-Tutorial 03/2026",
   "beobachtung": "Nur Titel gesehen („Building a Scroll-Driven Animated Grid“), Inhalt nicht abrufbar.",
   "art": "artikel"
  },
  {
   "seite": "Codrops Demo „Layout Formation on Scroll“",
   "url": "https://tympanus.net/Development/OnScrollLayoutFormations/",
   "auszeichnung": "",
   "beobachtung": "Fotografie-Portfolio-Demo; Teaser: Content bleibt gepinnt, bis die Formation aufgebaut ist.",
   "art": "demo"
  },
  {
   "seite": "Stewart & Partners",
   "url": "https://www.stewartpartners.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (sp-scripts.txt): .photo-grid_section – Rasterbilder fromTo marginTop 100 % → 0 %, stagger each .1 from \"random\", ease power2.out, scrub (top bottom → top 50 %); danach Raster auf opacity .2 und grayscale(1).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Exploration of On-Scroll Layout Formations (Codrops)",
   "url": "https://tympanus.net/codrops/2024/09/18/exploration-of-on-scroll-layout-formations/"
  },
  {
   "titel": "On-Scroll Perspective Grid Animations (Codrops)",
   "url": "https://tympanus.net/codrops/2023/08/03/on-scroll-perspective-grid-animations/"
  },
  {
   "titel": "On-Scroll Column & Row Animations (Codrops)",
   "url": "https://tympanus.net/codrops/2023/08/15/on-scroll-column-row-animations/"
  },
  {
   "titel": "Codrops Demo: Layout Formation on Scroll",
   "url": "https://tympanus.net/Development/OnScrollLayoutFormations/"
  }
 ],
 "kombinierbar_mit": [
  "bento-grid-interaktiv",
  "flip-zustandswechsel",
  "unendliche-leinwand-galerie",
  "pinned-scrub-scrollytelling",
  "medien-expansion-scroll"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/layout-formation-scroll/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/layout-formation-scroll/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/layout-formation-scroll/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Echte Seite aus dem Codrops-Artikel live geprüft; Awwwards-Inspirationen entfernt."
  ],
  "zusammengelegt_aus": [
   "raster-formation-scroll",
   "layout-formation-scroll"
  ],
  "querverweis_kategorien": [
   "Hero & Section-Layouts"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Monitoring-Dashboard setzt sich beim Scrollen zusammen: Neun Kacheln steigen in ihre Fächer, fliegen aus dem Chaos ein oder fächern sich aus einem Stapel auf, erst dann löst sich der Pin.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0"
  ],
  "werte": {
   "easing": "power2.out = cubic-bezier(0.33, 1, 0.68, 1) für jede Kachel (gemessen bei Stewart & Partners)",
   "stagger": "each 0.1, from 'random' (Aufsteigen, Zerstreut) bzw. from 'end' (Stapel: oberste Karte zuerst)",
   "dauer": "scrollgekoppelt; je Kachel duration 1 in der Timeline, gesamt 1.8 + 0.45 Haltezone am Ende",
   "scrub": 0.5,
   "pin": "Bühne (100svh) mit start 'top top', end '+=150%' (1,5 Viewporthöhen), pinSpacing an",
   "timeline_bereich": "start = Pin-Start − 0.6 × Viewporthöhe (Formation beginnt, wenn die Bühne bei 60 % steht), end = Pin-Ende; in der Vorschau ohne Vorlauf",
   "endzustand": "fromTo auf { x: 0, y: 0, xPercent: 0, yPercent: 0, rotation: 0, scale: 1 }; Endlayout ist ein normales CSS-Grid mit 12 Spalten × 3 Reihen, gap 12px, max-width 1200px",
   "variante_aufsteigen": "yPercent 100 → 0, Fach (Grid-Zelle) mit overflow: hidden, entspricht marginTop 100 % → 0 bei Stewart & Partners",
   "variante_zerstreut": "x ±40vw, y ±30vh, rotation ±10° → 0 (feste Zufallswerte, Seed 1855)",
   "variante_stapel": "alle Kacheln in der Rastermitte, scale = min(1, 260 px / Fachbreite), rotation ±3°, je Karte 4 px versetzt → Fach",
   "fach_skelett": "leere Zelle: 1px dashed #2a2d30, radius 14px, Fach-Label A1…C3 in Geist Mono 10px",
   "telefon": "unter 720px: 2 Spalten, kein Pin; je Kachel eigener ScrollTrigger start 'top bottom', end 'top 62%', scrub 0.5",
   "ui": "Hover, Knöpfe 160 ms cubic-bezier(0.25, 0.46, 0.45, 0.94) (easeOutQuad aus dem Rezept)",
   "farben": "Grund #08090a, Kachel #111213, Linie #242728, Text #f7f8f8 / #d0d6e0 / #8a8f98, Marke #f4c542, Status ok #59d499, warn #ff9f43, Störung #ff6161",
   "schrift": "Geist 580 (h1 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), −0.022em, Zeilenhöhe 1), Geist Mono 10–11px versal 0.14em für Labels und Zahlen",
   "vorfuehrung": "Selbst-Scroll über den Timeline-Bereich: Runde 7.6 s, 6 % Halt, 62 % Fahrt (Kosinus), Rest Halt; jede Runde die nächste Variante"
  },
  "ausloeser": "scroll",
  "touch": "Unter 720px Breite zwei Spalten ohne Pin: Jede Kachel formiert sich einzeln, sobald sie ins Bild scrollt (gleiche Varianten, kürzere Wege). Tablets ab 720px bekommen die gepinnte Desktop-Fassung. Kein Hover-Effekt auf Touch.",
  "reduziert": "Kein Pin, keine Bewegung: Das Raster steht sofort im Endzustand, die Bühne wächst auf natürliche Höhe. Varianten-Umschalter und Werte-Anzeige sind ausgeblendet, der Status zeigt „Alle 9 Module live“.",
  "korrekturen": {
   "beschreibung": "Eine Bildsektion wird gepinnt. Beim Scrollen fliegen die Rasterelemente aus unterschiedlichen Startpunkten an ihre Zielposition, etwa aus der Mitte, von den Rändern oder aus einem Stapel. Erst wenn das Raster vollständig ist, löst sich der Pin. Oft wird das fertige Raster danach zur Navigation, ein Klick öffnet das Projekt.",
   "warum_es_wirkt": "Das Layout selbst wird zur Animation. Aus Unordnung entsteht sichtbar Ordnung, das zeigt Konstruktion, Fülle und Kuratierung zugleich. Ein Galerie-Einstieg bekommt so eine Inszenierung.",
   "wann_einsetzen": "Portfolio- und Projektübersichten, Fotografie-Portfolios, Bildarchive, Kollektionen, Studio-Intros und Kampagnen mit vielen Motiven. Auch Produktübersichten, deren Module ein Gesamtbild ergeben, etwa ein Dashboard.",
   "wann_nicht": "Bei weniger als etwa acht Elementen. Wenn einzelne Bilder wichtig sind und schnell anklickbar sein müssen. Auf schwacher Hardware mit vielen Videos im Raster.",
   "varianten": [
    "Gepinnter Aufbau: Elemente steigen gestaffelt in ihre Fächer",
    "Zerstreut → Raster: zufällige Startpositionen und Drehungen",
    "Stapel → Raster: alle Elemente liegen in der Mitte und fächern sich auf",
    "Zoom-out vom Einzelbild zum Raster oder umgekehrt zum Vollbild",
    "Gegenläufige Spalten",
    "3D-Perspektiv-Raster: Elemente kippen in Position"
   ],
   "umsetzung": "Den Endzustand als normales CSS-Grid bauen. Den Startzustand relativ zur Endposition setzen, zum Beispiel alle Elemente in der Mitte gestapelt oder zufällige x, y und rotation. Dann eine gsap.timeline mit ScrollTrigger (pin, scrub) auf den Endzustand fahren: tl.fromTo(items, start, { x: 0, y: 0, rotation: 0, scale: 1, ease: 'power2.out', stagger: { each: 0.1, from: 'random' } }). Die Staffelung kann auch nach Abstand zur Mitte laufen (stagger: { grid: 'auto', from: 'center' }). Alternativ mit Flip: den Zustand des Streulayouts aufnehmen, Klasse umschalten und Flip.from scrollgekoppelt abspielen. Bilder mit festen Seitenverhältnissen einbinden, damit nichts springt. Fallstrick: Mit invalidateOnRefresh setzen from-Tweens, die noch nicht begonnen haben, nach einem Refresh ihren Startzustand nicht neu; besser fromTo nutzen und bei Größenänderung neu bauen.",
   "mobil": "Weniger Spalten und kürzerer Pin. Oder ganz ohne Pin: jedes Element einzeln einblenden, sobald es ins Bild kommt.",
   "reduzierte_bewegung": "Kein Pin, das Raster steht sofort im Endzustand.",
   "barrierefreiheit": "Die DOM-Reihenfolge entspricht dem Endlayout. Während des Pins keine fokussierbaren Elemente außerhalb des sichtbaren Bereichs. Bilder, die Projekte verlinken, brauchen einen Alternativtext."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept saas-produkt-praezise, erfundene Monitoring-Software Seezeichen aus Rostock (Kardinalzeichen als Logo, Gelb als einziger Markenton, dunkel, Geist + Geist Mono). Das Raster ist das Produkt selbst: neun echte UI-Kacheln (Verfügbarkeit, p95, Rufbereitschaft, Vorfälle, Regionen, Statusseite, Alarmregel, Deploys, Checks) als HTML/SVG. Leere Fächer zeigen das Skelett des Endlayouts, eine Statuspille zählt die Kacheln im Fach mit (0/9 → Alle 9 Module live). Umschalter Aufsteigen (gemessene Werte von Stewart & Partners), Zerstreut, Stapel. Die Formation beginnt schon beim Hereinscrollen und endet im Pin; Pin und Timeline sind getrennte ScrollTrigger, der Timeline-Bereich wird numerisch aus dem Pin abgeleitet. Vorschau spielt alle drei Varianten nacheinander. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Achsenbeschriftung der Verfügbarkeitskachel #5d6168 → #7f848c (5:1 auf #111213). Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}