{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-kinetisch-inout",
 "name": "Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)",
 "name_en": "Cinematic inOut / power4.inOut transition language",
 "kurz": "Projekt-Slideshow eines Designstudios: Rahmen fährt 100 %, das Bild darin 30 % gegenläufig, Buchstaben tauschen zufällig versetzt, alles mit einer power4.inOut-Kurve.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "luxuriös",
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "filmisch",
  "dramatisch",
  "kraftvoll",
  "luxuriös"
 ],
 "technik": [
  "gsap",
  "css",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Bewegungssprache für große Zustandswechsel wie Slide, Seite oder Raster zu Vollbild. Symmetrische inOut-Kurven mit starkem Anlauf und starkem Auslauf geben der Bewegung Masse. Mehrere Ebenen laufen gleichzeitig mit derselben Kurve, aber unterschiedlichen Distanzen: der Rahmen 100 %, das Bild darin 30 % gegenläufig. Oft in zwei Phasen mit Überlappung.",
  "warum_es_wirkt": "Es wirkt wie eine Kamerafahrt: kein abruptes Anfahren, kein Ruck am Ende. Die Mitte ist schnell. Dadurch wirkt die Bewegung energisch und trotzdem kontrolliert. Die gegenläufige Bildebene erzeugt Tiefe.",
  "wann_einsetzen": "Slideshows, Seitenübergänge, Menü-Overlays, Galerie-Vollbild und Hero-Wechsel.",
  "wann_nicht": "Nicht für Einblendungen beim Scrollen, dort wirkt der langsame Anlauf träge. Nicht für Mikrointeraktionen wie Buttons oder Formulare.",
  "varianten": [
   "power4.inOut, cubic-bezier(0.83, 0, 0.17, 1): dramatisch, 1,2 bis 1,5 s",
   "power3.inOut, cubic-bezier(0.76, 0, 0.24, 1): Standard, 0,8 bis 1,2 s; in Produktion auch 0,5 bis 0,6 s für Menüs",
   "power2.inOut, cubic-bezier(0.65, 0, 0.35, 1): sanft, etwa 1,5 s bei großen 3D-Bewegungen",
   "Zweiphasig: erst expo.out 0,7 s (zurücktreten), dann power4.inOut 1 s ab 0,6 s (Schwenk)",
   "Extrem: cubic-bezier(1, 0, 0, 1) mit 0,5 s für Navigationslinien"
  ],
  "umsetzung": "CSS-Token: --ease-cinematic: cubic-bezier(0.83, 0, 0.17, 1) (power4.inOut); --ease-cinematic-soft: cubic-bezier(0.76, 0, 0.24, 1) (power3.inOut); --ease-inout-gentle: cubic-bezier(0.65, 0, 0.35, 1) (power2.inOut). Dauern 0,9 / 1,2 / 1,5 s. In GSAP dieselben Werte per CustomEase oder die Namen power2/3/4.inOut. Rahmen mit overflow: hidden um xPercent 100 bewegen, das Bild darin um 30 gegenläufig. Buchstaben mit yPercent 101 aus Masken tauschen, stagger { each: 0.03 bis 0.05, from: 'random' }. Eingaben während der Animation sperren (isAnimating) und die letzte puffern. Für echte Seitenwechsel dieselbe Kurve in View Transitions verwenden (::view-transition-old/new mit animation-timing-function).",
  "mobil": "Dauern auf 0,8 bis 1,1 s kürzen. Wischen als Eingabe anbieten.",
  "reduzierte_bewegung": "Crossfade 300 bis 500 ms mit power1.inOut, ohne Verschiebung und ohne Versatz.",
  "barrierefreiheit": "Während der Sperre Eingaben puffern statt verwerfen. Den Wechsel über eine aria-live-Region ansagen und den Fokus auf dem Bedienelement lassen. Geteilte Buchstaben mit aria-hidden versehen und den Titel als ganzen Text für Screenreader bereitstellen."
 },
 "messwerte": {
  "easing": "Produktion: cubic-bezier(0.76,0,0.24,1) = power3.inOut ('kin .6s); power2.inOut / power4.inOut (OFF+BRAND 173× / 49×); Extrem cubic-bezier(1,0,0,1) (Exo Ape); Demo: power4.inOut ≈ cubic-bezier(0.83,0,0.17,1)",
  "dauer_ms": "Produktion: Exo Ape 500; 'kin 600; Demo-Skala 900 / 1200 / 1500 / 2500",
  "stagger_ms": "OFF+BRAND 30 (40×) und 50 zufällig; Demo 50–80",
  "distanz": "Ebene 100 %, Gegenebene 20–30 %",
  "sonstiges": "GSAP-Namen und Dauern beobachtet; cubic-bezier-Werte sind die üblichen easings.net-Näherungen (GSAP power2/3/4 = cubic/quart/quint)",
  "herkunft": "beobachtet",
  "quelle": "https://assets.itsoffbrand.io/ob/js/ob.2026.index.23.js"
 },
 "kurve": {
  "bezier": [
   0.83,
   0,
   0.17,
   1
  ],
  "css": "cubic-bezier(0.83, 0, 0.17, 1)",
  "name": "power4.inOut",
  "dauer_ms": 1200
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Demo – Slideshow Animations (Demo 1 und 8)",
   "url": "http://tympanus.net/Development/SlideshowAnimations/",
   "auszeichnung": "",
   "beobachtung": "Demo 1: 1,5 s power4.inOut, Rahmen 100 %, Bild 30 % gegenläufig. Demo 8: Phase 1 0,7 s expo, Phase 2 1 s power4.inOut ab 0,6 s.",
   "art": "demo"
  },
  {
   "seite": "Codrops Demo – On-Scroll 3D Carousel",
   "url": "https://tympanus.net/Development/3DCarousel/",
   "auszeichnung": "",
   "beobachtung": "Öffnen 1,5 s power2.inOut, Wegflug 2,5 s power3.inOut ab 0,7 s; Schließen 1,3 s expo.",
   "art": "demo"
  },
  {
   "seite": "'kin",
   "url": "https://by-kin.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Menü-Buchstaben transform .6s cubic-bezier(.76,0,.24,1); GSAP power3.inOut 13× neben power3.out.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "OFF+BRAND",
   "url": "https://itsoffbrand.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): GSAP power2.inOut 173× und power4.inOut 49×, z. B. yPercent −101 mit stagger { each: .05, from: 'random' }; Stagger .03 40×.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Exo Ape",
   "url": "https://www.exoape.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Extrem-InOut cubic-bezier(1,0,0,1) 9× mit .5s für Navigationslinien (transform-origin right).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "GitHub: codrops/SlideshowAnimations",
   "url": "https://github.com/codrops/SlideshowAnimations"
  }
 ],
 "kombinierbar_mit": [
  "slideshow-innere-gegenparallaxe",
  "shader-uebergang-dissolve",
  "galerie-shared-element-vollbild"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-kinetisch-inout/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 3 Produktionsseiten."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Projekt-Slideshow eines Designstudios: Rahmen fährt 100 %, das Bild darin 30 % gegenläufig, Buchstaben tauschen zufällig versetzt, alles mit einer power4.inOut-Kurve.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "CustomEase@3.15.0"
  ],
  "werte": {
   "easing": "power4.inOut = cubic-bezier(0.83, 0, 0.17, 1) (CustomEase 'kin4'); Variante power3.inOut = cubic-bezier(0.76, 0, 0.24, 1) (CustomEase 'kin3'); Zweiphasig Phase 1 expo.out = cubic-bezier(0.16, 1, 0.3, 1)",
   "css_token": "--ease-cinematic: cubic-bezier(0.83, 0, 0.17, 1); --ease-cinematic-soft: cubic-bezier(0.76, 0, 0.24, 1); --ease-phase-1: cubic-bezier(0.16, 1, 0.3, 1); --dur-cinematic: 1.2s; --dur-cinematic-soft: 0.9s",
   "dauer_ms": "power4: 1200 (mobil 1000); power3: 900 (mobil 800); Zweiphasig: Phase 1 700 (mobil 600), Phase 2 1000 ab 600 (mobil 900 ab 500)",
   "stagger_ms": "Buchstaben each 50, from 'random' (power4 und Zweiphasig Phase 2); power3: each 30 random; alter Titel in Phase 1: each 30 random",
   "distanz": "Rahmen xPercent ±100, inneres Bild xPercent ∓30 (gegenläufig); Texte yPercent ±101 in overflow-hidden-Masken; Zähler rollt mit; Fortschrittslinie scaleX (n/5)",
   "zweiphasig": "Phase 1: Fenster scale 1 → 0.86, altes Bild scale 1 → 1.12, alter Titel geht (expo.out). Phase 2 ab 600 ms: Schwenk 100 / 30 %, Fenster scale 0.86 → 1, neues Bild scale 1.12 → 1 (power4.inOut)",
   "sperre": "isAnimating; während des Wechsels wird die letzte Eingabe (Richtung) gepuffert und danach ausgeführt",
   "eingabe": "Pfeiltasten links/rechts, Pfeil-Buttons 44 px, Wischen ab 40 px auf dem Bildfenster",
   "reduziert": "Crossfade 400 ms power1.inOut (≈ cubic-bezier(0.45, 0, 0.55, 1)), ohne Versatz und ohne Bewegung",
   "titel": "mix-blend-mode: difference, damit der Titel auch über hellem Bild lesbar bleibt",
   "schleife_ms": "Takt 3000 (reduziert 2200), erster Wechsel nach 1800; je zwei Wechsel pro Variante"
  },
  "ausloeser": "klick",
  "touch": "Wischen auf dem Bildfenster (touch-action: pan-y, Schwelle 40 px) oder Pfeil-Buttons; Hinweis „Wischen“ im Bild; unter 760 px kürzere Dauern (1000 / 800 ms, Zweiphasig 600 + 900 ms), Bild über dem Text.",
  "reduziert": "Projekte wechseln per Crossfade in 400 ms (power1.inOut), Texte blenden ohne Masken-Bewegung über, Zähler und Fortschritt springen; Eingaben bleiben gepuffert.",
  "korrekturen": {
   "beschreibung": "Bewegungssprache für große Zustandswechsel wie Slide, Seite oder Raster zu Vollbild. Symmetrische inOut-Kurven mit starkem Anlauf und starkem Auslauf geben der Bewegung Masse. Mehrere Ebenen laufen gleichzeitig mit derselben Kurve, aber unterschiedlichen Distanzen: der Rahmen 100 %, das Bild darin 30 % gegenläufig. Oft in zwei Phasen mit Überlappung.",
   "warum_es_wirkt": "Es wirkt wie eine Kamerafahrt: kein abruptes Anfahren, kein Ruck am Ende. Die Mitte ist schnell. Dadurch wirkt die Bewegung energisch und trotzdem kontrolliert. Die gegenläufige Bildebene erzeugt Tiefe.",
   "wann_einsetzen": "Slideshows, Seitenübergänge, Menü-Overlays, Galerie-Vollbild und Hero-Wechsel.",
   "wann_nicht": "Nicht für Einblendungen beim Scrollen, dort wirkt der langsame Anlauf träge. Nicht für Mikrointeraktionen wie Buttons oder Formulare.",
   "varianten": [
    "power4.inOut, cubic-bezier(0.83, 0, 0.17, 1): dramatisch, 1,2 bis 1,5 s",
    "power3.inOut, cubic-bezier(0.76, 0, 0.24, 1): Standard, 0,8 bis 1,2 s; in Produktion auch 0,5 bis 0,6 s für Menüs",
    "power2.inOut, cubic-bezier(0.65, 0, 0.35, 1): sanft, etwa 1,5 s bei großen 3D-Bewegungen",
    "Zweiphasig: erst expo.out 0,7 s (zurücktreten), dann power4.inOut 1 s ab 0,6 s (Schwenk)",
    "Extrem: cubic-bezier(1, 0, 0, 1) mit 0,5 s für Navigationslinien"
   ],
   "umsetzung": "CSS-Token: --ease-cinematic: cubic-bezier(0.83, 0, 0.17, 1) (power4.inOut); --ease-cinematic-soft: cubic-bezier(0.76, 0, 0.24, 1) (power3.inOut); --ease-inout-gentle: cubic-bezier(0.65, 0, 0.35, 1) (power2.inOut). Dauern 0,9 / 1,2 / 1,5 s. In GSAP dieselben Werte per CustomEase oder die Namen power2/3/4.inOut. Rahmen mit overflow: hidden um xPercent 100 bewegen, das Bild darin um 30 gegenläufig. Buchstaben mit yPercent 101 aus Masken tauschen, stagger { each: 0.03 bis 0.05, from: 'random' }. Eingaben während der Animation sperren (isAnimating) und die letzte puffern. Für echte Seitenwechsel dieselbe Kurve in View Transitions verwenden (::view-transition-old/new mit animation-timing-function).",
   "mobil": "Dauern auf 0,8 bis 1,1 s kürzen. Wischen als Eingabe anbieten.",
   "reduzierte_bewegung": "Crossfade 300 bis 500 ms mit power1.inOut, ohne Verschiebung und ohne Versatz.",
   "barrierefreiheit": "Während der Sperre Eingaben puffern statt verwerfen. Den Wechsel über eine aria-live-Region ansagen und den Fokus auf dem Bedienelement lassen. Geteilte Buchstaben mit aria-hidden versehen und den Titel als ganzen Text für Screenreader bereitstellen."
  },
  "geprueft": "31.10.2026",
  "notiz": "Projekt-Slideshow des erfundenen Atelier Ostwind mit fünf Markenbildern. Umschalter: power4 1,2 s, power3 0,9 s, Zweiphasig (Fenster tritt zurück, dann Schwenk). Rahmen 100 %, Bild 30 % gegenläufig, Buchstaben zufällig versetzt, Zähler und Fortschritt mit derselben Kurve; Mini-Kurve mit Punkt läuft mit. Schnelle Eingaben werden gepuffert. Titel mit mix-blend-mode difference ragt ins Bild. Vorführung: je zwei Wechsel pro Variante im 3-s-Takt. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: 320 px: Bühne, Feld und Fuß mit minmax(0, 1fr) statt auto/1fr, bis 360 px Steuerzeile enger und Werte-Spans umbrechend. Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}