{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-editorial-langsam",
 "name": "Animationsstil „Editorial langsam“",
 "name_en": "Editorial slow / expo-out reveal language",
 "kurz": "Fallstudie eines Designstudios: Zeilen steigen aus Masken, das Bild deckt sich auf und sinkt von 1,1 auf 1, alles mit expo.out und langer, weicher Landung.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "editorial",
  "luxuriös"
 ],
 "stimmung_roh": [
  "editorial",
  "ruhig",
  "souverän",
  "elegant"
 ],
 "technik": [
  "gsap",
  "splittext",
  "css",
  "clip-path"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Bewegungssprache für magazinartige Seiten. Elemente starten schnell und landen lange und weich (expo.out). Text steigt zeilenweise aus Masken (yPercent 100 → 0). Bilder decken sich per clip-path auf und sinken dabei leicht von 1,1 auf 1. Keine Federn, kein Überschwingen. Großzügige Pausen und ein Versatz pro Zeile.",
  "warum_es_wirkt": "Die schnelle Anfangsbewegung verhindert ein träges Gefühl. Die lange Landephase wirkt souverän und lässt Zeit zum Lesen. Weil alles dieselbe Kurve nutzt, wirkt die Seite wie aus einem Guss.",
  "wann_einsetzen": "Portfolios, Magazine, Architektur, Kultur und Agenturseiten mit großer Typografie und viel Weißraum.",
  "wann_nicht": "Für UI-Feedback wie Buttons und Formulare ist es zu langsam. Bei sehr vielen gleichzeitigen Elementen wird es zäh.",
  "varianten": [
   "Maske: Zeilen aus overflow-hidden-Masken, Bild per clip-path von unten, Scale 1,1 → 1",
   "Unschärfe: blur 10px → 0 mit y 24px und Opazität statt Maske",
   "Kurve .19: cubic-bezier(0.19, 1, 0.22, 1), kürzere Haarlinien (700 ms) und dichterer Versatz (60 ms)"
  ],
  "umsetzung": "CSS-Token: --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1); --dur-reveal: 1.2s; --dur-reveal-lg: 1.6s; --stagger-line: 0.1s. Dauern-Skala 600 / 1000 / 1200 / 1600 / 2000 ms. GSAP: ease 'expo.out' (oder CustomEase mit denselben Werten), duration 1.2, stagger 0.08 bis 0.15. Zeilen per SplitText mit mask: 'lines' oder Wrapper mit overflow: hidden. ScrollTrigger mit start 'top 85%' und once. Für Raumwechsel expo.inOut.",
  "mobil": "Dauern um etwa 20 % kürzen, Distanzen halbieren.",
  "reduzierte_bewegung": "Nur Opazität 0 → 1 in 300 ms, ohne Translation und ohne Versatz.",
  "barrierefreiheit": "Ohne JS muss aller Text sichtbar sein. Den verborgenen Ausgangszustand deshalb nur über eine Klasse am html setzen. Geteilte Zeilen bekommen ein aria-label am Elternelement (SplitText aria: 'auto')."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) (Cuberto 11×, Paper 6×, Raycast 7×, Unseen); Variante cubic-bezier(0.19, 1, 0.22, 1) (Terminal Industries 27×, Aman, Lando Norris); GSAP expo.out (Unseen 45×, Rejouice 24×); Raumwechsel expo.inOut",
  "dauer_ms": "Produktion: Cuberto 800 / 1200; Unseen 1000; Terminal 700 / 1000 / 1200. Skala: 600 / 1000 / 1200 / 1600 / 2000",
  "stagger_ms": "Unseen 30 und 14; Terminal 20–60; Demo: Zeilen 100–150",
  "distanz": "Text yPercent 100 in Maske oder y 24–40 px; Bilder clip-path inset 100 % → 0 und scale 1,1 → 1",
  "sonstiges": "Kein Überschwingen; Opazität nur ergänzend",
  "herkunft": "beobachtet",
  "quelle": "https://cuberto.com/_astro/Footer.v_lo1qnf.css"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 1200
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Demo – Repeating Image Transition",
   "url": "https://tympanus.net/Development/RepeatingImageTransition/",
   "auszeichnung": "",
   "beobachtung": "Panel-Text: 1 s, expo, y 25 → 0, verzögert um 0,3 s.",
   "art": "demo"
  },
  {
   "seite": "Codrops – Infinite Parallax Grid (Jorge Toloza)",
   "url": "https://tympanus.net/codrops/2025/06/11/building-an-infinite-parallax-grid-with-gsap-and-seamless-tiling/",
   "auszeichnung": "",
   "beobachtung": "Bildunterschrift-Zeilen mit i × 0,15 s Versatz; Intro der Kacheln 2 s expo.inOut, Stagger 0,05 s.",
   "art": "artikel"
  },
  {
   "seite": "Osmo – Flick Cards Slider",
   "url": "https://www.osmo.supply/resource/flick-cards-slider",
   "auszeichnung": "",
   "beobachtung": "Button-Reveal mit 1 s cubic-bezier(0.16, 1, 0.3, 1), also der expo.out-Näherung.",
   "art": "demo"
  },
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): cubic-bezier(.16,1,.3,1) 11× im CSS: Karten-Hover transform 1.2s, weitere Übergänge .8s (11×); dazu GSAP + CustomEase + Lenis.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Unseen Studio",
   "url": "https://www.unseen.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): GSAP ease expo.out 45× (dazu expo.inOut 24×), CSS cubic-bezier(.16,1,.3,1) mit 1s; Stagger .03 und .014.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Terminal Industries",
   "url": "https://terminal-industries.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Variante cubic-bezier(.19,1,.22,1) 27×: Reveal transform 1.2s, Linien (scaleX) .7s, weitere 1s; GSAP expo.out 13× und expo.inOut 14×.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP Eases (Visualizer)",
   "url": "https://gsap.com/docs/v3/Eases/"
  },
  {
   "titel": "easings.net (easeOutExpo u. a.)",
   "url": "https://easings.net/"
  }
 ],
 "kombinierbar_mit": [
  "slideshow-innere-gegenparallaxe",
  "galerie-shared-element-vollbild",
  "unendliche-leinwand-galerie"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 3 Produktionsseiten mit abgelesenen Werten."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Fallstudie eines Designstudios: Zeilen steigen aus Masken, das Bild deckt sich auf und sinkt von 1,1 auf 1, alles mit expo.out und langer, weicher Landung.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "SplitText@3.15.0",
   "ScrollTrigger@3.15.0",
   "CustomEase@3.15.0"
  ],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) (expo.out, als CustomEase 'editorial'); Variante „Kurve .19“: cubic-bezier(0.19, 1, 0.22, 1)",
   "css_token": "--ease-editorial: cubic-bezier(0.16, 1, 0.3, 1); --dur-reveal: 1.2s; --dur-reveal-lg: 1.6s; --stagger-line: 0.1s",
   "dauer_ms": "Titel 1200, Vorspann/Rubrik/Daten 1000, Bild 1600, Haarlinie 1200; Variante .19: Bild 1200, Haarlinie 700",
   "stagger_ms": "Zeilen 100 (Variante .19: 60); Karten im Raster 150",
   "einsatz_ms": "Haarlinie 0, Bild 100, Rubrik 200, Titel 300, Vorspann 700, Datenlinie 800, Daten 900",
   "distanz": "Text yPercent 100 → 0 in Zeilenmaske; Unschärfe: blur 10px → 0 und y 24px → 0 plus Opazität; Bild clip-path inset(100% 0 0 0) → inset(0) (Variante .19 von links: inset(0 100% 0 0)), Bild scale 1,1 → 1; Haarlinien scaleX 0 → 1",
   "hover_bild": "transform scale 1.04, 1200 ms, cubic-bezier(0.16, 1, 0.3, 1)",
   "scroll": "ScrollTrigger start 'top 85%', once",
   "mobil": "unter 760 px: Dauern × 0,8, Distanzen halbiert (y 12px, blur 5px)",
   "reduziert": "nur Opazität 0 → 1, 300 ms, linear, ohne Versatz",
   "schleife_ms": "Stand 3600, Abgang Opazität 450 ms power2.in, dann nächste Variante"
  },
  "ausloeser": "laden",
  "touch": "Gleiche Auftritte wie am Desktop, unter 760 px 20 % kürzer und mit halben Distanzen; kein Bild-Hover, Bild steht unter dem Text.",
  "reduziert": "Alle Elemente blenden in 300 ms ohne Bewegung und ohne Versatz ein; kein Bild-Hover, Kurvenpunkt steht am Ende.",
  "korrekturen": {
   "beschreibung": "Bewegungssprache für magazinartige Seiten. Elemente starten schnell und landen lange und weich (expo.out). Text steigt zeilenweise aus Masken (yPercent 100 → 0). Bilder decken sich per clip-path auf und sinken dabei leicht von 1,1 auf 1. Keine Federn, kein Überschwingen. Großzügige Pausen und ein Versatz pro Zeile.",
   "warum_es_wirkt": "Die schnelle Anfangsbewegung verhindert ein träges Gefühl. Die lange Landephase wirkt souverän und lässt Zeit zum Lesen. Weil alles dieselbe Kurve nutzt, wirkt die Seite wie aus einem Guss.",
   "wann_einsetzen": "Portfolios, Magazine, Architektur, Kultur und Agenturseiten mit großer Typografie und viel Weißraum.",
   "wann_nicht": "Für UI-Feedback wie Buttons und Formulare ist es zu langsam. Bei sehr vielen gleichzeitigen Elementen wird es zäh.",
   "varianten": [
    "Maske: Zeilen aus overflow-hidden-Masken, Bild per clip-path von unten, Scale 1,1 → 1",
    "Unschärfe: blur 10px → 0 mit y 24px und Opazität statt Maske",
    "Kurve .19: cubic-bezier(0.19, 1, 0.22, 1), kürzere Haarlinien (700 ms) und dichterer Versatz (60 ms)"
   ],
   "umsetzung": "CSS-Token: --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1); --dur-reveal: 1.2s; --dur-reveal-lg: 1.6s; --stagger-line: 0.1s. Dauern-Skala 600 / 1000 / 1200 / 1600 / 2000 ms. GSAP: ease 'expo.out' (oder CustomEase mit denselben Werten), duration 1.2, stagger 0.08 bis 0.15. Zeilen per SplitText mit mask: 'lines' oder Wrapper mit overflow: hidden. ScrollTrigger mit start 'top 85%' und once. Für Raumwechsel expo.inOut.",
   "mobil": "Dauern um etwa 20 % kürzen, Distanzen halbieren.",
   "reduzierte_bewegung": "Nur Opazität 0 → 1 in 300 ms, ohne Translation und ohne Versatz.",
   "barrierefreiheit": "Ohne JS muss aller Text sichtbar sein. Den verborgenen Ausgangszustand deshalb nur über eine Klasse am html setzen. Geteilte Zeilen bekommen ein aria-label am Elternelement (SplitText aria: 'auto')."
  },
  "geprueft": "31.10.2026",
  "notiz": "Fallstudie des erfundenen Studio Halde (Magazin Leerstelle) mit drei Varianten im Umschalter: Maske, Unschärfe, Kurve .19. Eine Zeitleiste staffelt Haarlinie, Bild, Rubrik, Titel, Vorspann und Daten; eine Mini-Kurve im Fuß zeigt die Kurve mit mitlaufendem Punkt. Darunter drei Arbeiten, die beim Scrollen (top 85 %) mit denselben Token erscheinen. Vorführung wechselt die drei Varianten im Takt. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise .56 → .64 (5,0:1 auf Grund)."
 }
}