{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "flip-element-ueber-sections",
 "name": "Ein Element wandert über mehrere Sections",
 "name_en": "Scroll-driven element travel (GSAP Flip + ScrollTrigger)",
 "kurz": "Ein Zimmerschlüssel reist beim Scrollen von der Haustür ans Schlüsselbrett, auf den Nachttisch und in den Rückgabekasten. Ein Objekt erzählt die ganze Seite.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise",
  "filmisch",
  "verspielt"
 ],
 "stimmung_roh": [
  "verspielt",
  "erzählerisch",
  "produkt"
 ],
 "technik": [
  "gsap",
  "scrolltrigger",
  "flip"
 ],
 "technik_gruppen": [
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Ein zentrales Objekt (Produkt, Logo, Foto) steht groß im Hero. 2) Beim Scrollen wandert es an einen festen Platz in der nächsten Section, etwa in eine Rasterzelle oder neben einen Text. Dabei ändern sich Größe, Drehung und Radius. 3) In weiteren Sections springt es zu neuen Wegpunkten. 4) Die Wegpunkte sind leere Platzhalter im Layout. Flip berechnet die Bewegung dazwischen, ScrollTrigger koppelt sie an den Scroll.",
  "warum_es_wirkt": "Das Objekt ist ein roter Faden. Die Seite liest sich wie ein durchgehender Film statt wie eine Folge von Blöcken.",
  "wann_einsetzen": "Produkt-Landingpages, Portfolio-Intros und Geschichten mit einem Objekt als Hauptfigur.",
  "wann_nicht": "Wenn das Objekt in den Ziel-Layouts keinen klaren Platz hat. Bei responsiven Layouts mit stark wechselnden Positionen nur mit Testaufwand.",
  "varianten": [
   "Ein Objekt springt über Platzhalter von Wegpunkt zu Wegpunkt (Flip.fit)",
   "Mehrere Objekte verteilen sich aus einem Stapel in ein Raster",
   "Das Objekt verwandelt sich unterwegs, etwa vom Bild zur Karte",
   "CSS-Annäherung mit Anchor Positioning und scroll-driven Animations (experimentell)"
  ],
  "umsetzung": "Platzhalter .wp-1 bis .wp-n ins Layout setzen, leer und im selben Seitenverhältnis wie das Objekt. Das Objekt liegt absolut im gemeinsamen Container, damit es den Fluss nicht stört. Wegpunkte nacheinander vermessen: vars = Flip.fit(el, wp, { getVars: true }), dann gsap.set(el, vars) und den nächsten messen. Daraus eine Timeline bauen: gsap.timeline({ scrollTrigger: { trigger: '.reise', start: 'top top', end: 'bottom bottom', scrub: 1 } }) mit tl.to(el, { ...vars, ease: 'none' }) je Strecke. Drehungen der Platzhalter übernimmt Flip.fit mit. Bei Resize alles neu vermessen und die Timeline neu bauen (oder invalidateOnRefresh). Fantasy nutzt dasselbe Prinzip mit Flip.from(state, { absolute: true, simple: true, ease: 'none' }) in einer scrub-Timeline.",
  "mobil": "Weniger Wegpunkte oder kleinere Sprünge. Bei gestapelten Sections das Objekt notfalls pro Section neu zeigen.",
  "reduzierte_bewegung": "Keine Wanderung. Das Objekt steht an jedem Wegpunkt als statisches Duplikat.",
  "barrierefreiheit": "Das wandernde Objekt ist dekorativ und bekommt aria-hidden. Die Inhalte daneben bleiben normaler Text."
 },
 "messwerte": {
  "easing": "none (scrub)",
  "dauer_ms": "scrollgekoppelt",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "GSAP Flip + ScrollTrigger",
  "herkunft": "beobachtet",
  "quelle": "https://www.fantasy.co/_nuxt/CD-pY35o.js"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Fantasy",
   "url": "https://www.fantasy.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (CD-pY35o.js): Flip.from(state,{absolute,simple,ease:\"none\"}) in einer scrub-Timeline (start top bottom, end bottom bottom) – das Medium wandert scrollgekoppelt von seiner Ausgangsposition in die Storytelling-Sektion.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP ScrollTrigger",
   "url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/"
  }
 ],
 "kombinierbar_mit": [
  "pinned-scrub-scrollytelling",
  "medien-expansion-scroll"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/flip-element-ueber-sections/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/flip-element-ueber-sections/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/flip-element-ueber-sections/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Erster Produktionsbeleg."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Zimmerschlüssel reist beim Scrollen von der Haustür ans Schlüsselbrett, auf den Nachttisch und in den Rückgabekasten. Ein Objekt erzählt die ganze Seite.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0",
   "Flip@3.15.0"
  ],
  "werte": {
   "easing": "none je Strecke (gemessen bei Fantasy), Glättung über scrub",
   "scrub": "1 (Sekunden Aufholzeit)",
   "dauer_ms": "scrollgekoppelt; Zeitachse in Scroll-Pixeln, Gesamtlänge = Höhe .reise − Viewporthöhe",
   "scrolltrigger": "trigger .reise, start 'top top', end 'bottom bottom'",
   "ankunft": "6 % Viewporthöhe, bevor der Wegpunkt mittig im Viewport steht",
   "anlauf": "Strecke beginnt höchstens 70 % Viewporthöhe vor der Ankunft, frühestens 12 % nach der vorigen Ankunft",
   "stagger": "Variante Schlüsselbund: 2,5 % Viewporthöhe Versatz je Schlüssel, um die Mitte zentriert",
   "wegpunkte": "4: Haustür (rotate −12°, Breite 34 % der Bühne) → Schlüsselbrett (Haken 7, 46–64 px) → Nachttisch (rotate −68°, 22 %) → Kasten (rotate 3°, 74–100 px, untere 30 % verdeckt)",
   "faecher": "Variante Schlüsselbund: 8 Schlüssel, rotate 34° bis −36° in 10°-Schritten, transform-origin 50% 30%",
   "seitenverhaeltnis": "Reisender und alle Platzhalter 100 : 260",
   "vorfuehrung": "je Wegpunkt 1100 ms halten, 1900 ms fahren (Sinus), Vorschau wechselt die Varianten",
   "ui": "Knöpfe 150–250 ms cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Verhalten, die Sections stehen untereinander (Text über Bühne). Die Wegpunkte liegen dadurch weiter auseinander, der Schlüssel quert kurz Text. Der Schalter ist eine kompakte Leiste unten.",
  "reduziert": "Keine Reise: der Schlüssel liegt als Duplikat an jedem Wegpunkt (Tür, Brett, Nachttisch, Kasten). Die Sections blenden beim Eintritt in 250 ms ein.",
  "korrekturen": {
   "beschreibung": "1) Ein zentrales Objekt (Produkt, Logo, Foto) steht groß im Hero. 2) Beim Scrollen wandert es an einen festen Platz in der nächsten Section, etwa in eine Rasterzelle oder neben einen Text. Dabei ändern sich Größe, Drehung und Radius. 3) In weiteren Sections springt es zu neuen Wegpunkten. 4) Die Wegpunkte sind leere Platzhalter im Layout. Flip berechnet die Bewegung dazwischen, ScrollTrigger koppelt sie an den Scroll.",
   "warum_es_wirkt": "Das Objekt ist ein roter Faden. Die Seite liest sich wie ein durchgehender Film statt wie eine Folge von Blöcken.",
   "wann_einsetzen": "Produkt-Landingpages, Portfolio-Intros und Geschichten mit einem Objekt als Hauptfigur.",
   "wann_nicht": "Wenn das Objekt in den Ziel-Layouts keinen klaren Platz hat. Bei responsiven Layouts mit stark wechselnden Positionen nur mit Testaufwand.",
   "varianten": [
    "Ein Objekt springt über Platzhalter von Wegpunkt zu Wegpunkt (Flip.fit)",
    "Mehrere Objekte verteilen sich aus einem Stapel in ein Raster",
    "Das Objekt verwandelt sich unterwegs, etwa vom Bild zur Karte",
    "CSS-Annäherung mit Anchor Positioning und scroll-driven Animations (experimentell)"
   ],
   "umsetzung": "Platzhalter .wp-1 bis .wp-n ins Layout setzen, leer und im selben Seitenverhältnis wie das Objekt. Das Objekt liegt absolut im gemeinsamen Container, damit es den Fluss nicht stört. Wegpunkte nacheinander vermessen: vars = Flip.fit(el, wp, { getVars: true }), dann gsap.set(el, vars) und den nächsten messen. Daraus eine Timeline bauen: gsap.timeline({ scrollTrigger: { trigger: '.reise', start: 'top top', end: 'bottom bottom', scrub: 1 } }) mit tl.to(el, { ...vars, ease: 'none' }) je Strecke. Drehungen der Platzhalter übernimmt Flip.fit mit. Bei Resize alles neu vermessen und die Timeline neu bauen (oder invalidateOnRefresh). Fantasy nutzt dasselbe Prinzip mit Flip.from(state, { absolute: true, simple: true, ease: 'none' }) in einer scrub-Timeline.",
   "mobil": "Weniger Wegpunkte oder kleinere Sprünge. Bei gestapelten Sections das Objekt notfalls pro Section neu zeigen.",
   "reduzierte_bewegung": "Keine Wanderung. Das Objekt steht an jedem Wegpunkt als statisches Duplikat.",
   "barrierefreiheit": "Das wandernde Objekt ist dekorativ und bekommt aria-hidden. Die Inhalte daneben bleiben normaler Text."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept boutique-hotel-gastgeber, erfundenes Gästehaus Quittenhof in Weimar (Newsreader, Mona Sans, Sand, Creme, Holz). Ein Zimmerschlüssel aus SVG wandert über vier Wegpunkte: Haustür, Schlüsselbrett mit gemalten Umrissen, Nachttisch in Draufsicht (dunkle Section), Rückgabekasten, dessen Vorderseite den Schlüssel überdeckt. Variante Schlüsselbund: acht Schlüssel fächern sich vom Ring aufs Brett, nur Nummer 7 reist weiter. Flip.fit wird nacheinander mit getVars vermessen, die Timeline läuft in Scroll-Pixeln, damit der Schlüssel zwischen den Strecken ruht. Werte-Anzeige zeigt den aktuellen Wegpunkt live. AD-Review 01.11.2026: Note 4 (Pult startet eingeklappt, weil es beim Scrollen das Schlüsselbrett verdeckte). Zugang 02.11.2026: --leise #82847f → #62645f (4,7:1 auf dem dunkelsten Papier), Fakten-Labels auf Dunkel .55 → .64, Buchrücken-Schrift opacity .7 → .86, Kontrastmodus-Rahmen für Knöpfe."
 }
}