{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-toggle-asymmetrisch",
 "name": "Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)",
 "name_en": "Asymmetric open/close (easeReverse) language / Asymmetric in/out timing / interruptible reverse (GSAP easeReverse)",
 "kurz": "Ein Mega-Menü öffnet mit Ausklang in 1,1 s und schließt mit Anlauf-Kurve in zwei Dritteln der Zeit, ohne wie zurückgespult zu wirken.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "präzise",
  "souverän",
  "modern",
  "hochwertig"
 ],
 "technik": [
  "gsap",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Öffnen und Schließen bekommen bewusst unterschiedliche Kurven und Tempi. Öffnen läuft genüsslich mit Ausklang-Kurve (expo.out oder back.out). Schließen ist schneller und hat eine Anlauf-Kurve (expo.in, sine.in) oder eine eigene kurze Kurve. So wirkt es nicht wie ein rückwärts abgespieltes Video. Seit GSAP 3.15 (April 2026) geht das mit easeReverse direkt am Tween oder in den Timeline-Defaults.",
  "warum_es_wirkt": "Öffnen ist eine Einladung, Schließen eine Bestätigung, die schnell aus dem Weg gehen soll. Exakt rückwärts abgespielte Animationen fühlen sich falsch an: Eine Überschwinger-Kurve holt beim Schließen erst aus, und das Schließen dauert so lange wie das Öffnen. Die eigene Schließbewegung wirkt natürlicher und souveräner.",
  "wann_einsetzen": "Alle umschaltbaren UI-Teile: Menüs, Overlays, Modals, Lightboxen, Drawer, Dropdowns, Akkordeons, Tooltips und Hover-Effekte mit Rückweg.",
  "wann_nicht": "Bei Scroll-gescrubbten Animationen, dort muss rückwärts exakt vorwärts spiegeln. Bei sehr kurzen Mikro-Übergängen unter 150 ms, dort ist der Unterschied nicht wahrnehmbar.",
  "varianten": [
   "GSAP easeReverse mit eigener Kurve, z. B. ease back.out(1.7), easeReverse expo.in oder sine.in",
   "GSAP easeReverse: true (gleiche Kurve, für die Rückrichtung angepasst)",
   "Zusätzlich timeScale 1,5 beim Schließen, beim unterbrochenen Schließen 2",
   "CSS: eigene transition im offenen Zustand und im Grundzustand (die Regel am Zielzustand gilt)",
   "Nur Tempo: rein langsam, raus schnell, z. B. 600/350 ms oder 800/300 ms"
  ],
  "umsetzung": "GSAP: gsap.timeline({ paused: true, defaults: { ease: 'back.out(1.7)', easeReverse: 'expo.in' } }). Öffnen mit tl.timeScale(1).play(), Schließen mit tl.timeScale(1.5).reverse(). Wird mitten im Öffnen geschlossen, rechnet GSAP die Rückwärtskurve ab dem Wendepunkt neu; dazu timeScale(2). CSS: die transition am Zielzustand gilt. Beispiel: .panel { transition: clip-path .3s cubic-bezier(.5,.3,0,1) } .offen .panel { transition: clip-path .8s cubic-bezier(.19,1,.22,1) }. Staffelung beim Öffnen 40 bis 60 ms, beim Schließen 20 bis 30 ms in umgekehrter Reihenfolge. Schließen dauert typisch 40 bis 67 % des Öffnens.",
  "mobil": "Unverändert. Auf Touch gilt dasselbe Paar aus Kurven und Dauern.",
  "reduzierte_bewegung": "Beide Richtungen als 150-ms-Überblendung ohne Weg.",
  "barrierefreiheit": "aria-expanded wechselt mit dem Zustand, nicht mit dem Animationsende. Beim Öffnen geht der Fokus in den Inhalt, beim Schließen zurück zum Auslöser. Esc schließt. Geschlossene Inhalte sind inert. Das Fokus-Management hängt nicht an der Animation."
 },
 "messwerte": {
  "easing": "Öffnen expo.out = cubic-bezier(0.16,1,0.3,1) oder back.out(1.7) = cubic-bezier(0.34,1.56,0.64,1); Schließen expo.in ≈ cubic-bezier(0.7,0,0.84,0) oder sine.in ≈ cubic-bezier(0.12,0,0.39,0); auf: cubic-bezier(.19,1,.22,1) / zu: cubic-bezier(.5,.3,0,1) (Collins); auf: cubic-bezier(.22,.31,0,1) / zu: cubic-bezier(.69,0,0,1) (Fiddle)",
  "dauer_ms": "Produktion Terminal: Einblenden 1200 (transform) / 600 (opacity), Ausblenden 600 / 400 (= 50–67 %); Demo: Schließen ca. 65 % (timeScale 1,5); auf 800 / zu 300 (Collins); auf 900 / zu 600 (Fiddle-Logo); auf 480 / zu 240 (Wokine)",
  "stagger_ms": "Öffnen 40–60; Schließen 20–30 in umgekehrter Reihenfolge",
  "distanz": "Menüraster scale .9 → 1 (Collins); translate ±120 % (Fiddle); translateY 10px nur beim Einblenden (Wokine)",
  "sonstiges": "timeScale 1,5 und Kurvenpaare beobachtet (GSAP-Blog); Dauern typisch; Verhältnis zu/auf zwischen 0,375 (Collins) und 0,67 (Fiddle); Fiddle zusätzlich Ease-in-Kurve beim Schließen",
  "herkunft": "beobachtet",
  "quelle": "https://terminal-industries.com/_nuxt/entry.BHtTNCfd.css; https://www.wearecollins.com/_nuxt/entry.DdWfn7dd.css",
  "aus_eintrag": [
   "token-toggle-asymmetrisch"
  ]
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 1200
 },
 "gesehen_bei": [
  {
   "seite": "GSAP 3.15 Release (easeReverse)",
   "url": "https://gsap.com/blog/3-15/",
   "auszeichnung": "",
   "beobachtung": "Beispiele: ease 'back.out(1.7)' mit easeReverse 'sine.in'; Timeline-Defaults ease 'back.out', easeReverse 'expo.in'; Schließen mit timeScale(1.5).reverse(); yoyoEase ist veraltet.",
   "art": "artikel"
  },
  {
   "seite": "Codrops – A Playful Clip Menu with GSAP's easeReverse (04/2026)",
   "url": "https://tympanus.net/codrops/2026/04/22/a-playful-clip-menu-with-gsaps-easereverse/",
   "auszeichnung": "",
   "beobachtung": "URL über die Recherche einer Nachbargruppe bekannt, Artikel selbst hier nicht gelesen.",
   "art": "artikel"
  },
  {
   "seite": "Codrops EaseReverseClipMenu (Repo/Demo)",
   "url": "https://github.com/codrops/EaseReverseClipMenu",
   "auszeichnung": "",
   "beobachtung": "Quellcode gelesen: GSAP 3.15.0; Menü clip-path 0.8 s expo mit easeReverse 'expo'; Cover-Items 0.7 s expo, beim vollen Schließen easeReverse elastic.out(0.3), beim unterbrochenen Schließen easeReverse: true + timeScale-Erhöhung.",
   "art": "demo"
  },
  {
   "seite": "Codrops LineHoverStyles",
   "url": "https://github.com/codrops/LineHoverStyles",
   "auszeichnung": "",
   "beobachtung": "CSS-Beispiel für asymmetrische Kurven: Hover cubic-bezier(0.4,1,0.8,1), Rückweg cubic-bezier(0.7,0,0.2,1).",
   "art": "demo"
  },
  {
   "seite": "Terminal Industries",
   "url": "https://terminal-industries.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Vue-Transition reveal-y: Enter transform 1.2s cubic-bezier(.19,1,.22,1) + opacity .6s; Leave transform .6s cubic-bezier(.25,.46,.45,.94) + opacity .4s – Ausblenden halb so lang mit anderer Kurve.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "COLLINS",
   "url": "https://www.wearecollins.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): entry.DdWfn7dd.css (Vue-Transition 'menu'): Öffnen .menu-enter-active .grid transform .8s var(--ease-out-expo) = cubic-bezier(.19,1,.22,1) von scale .9; Schließen .menu-leave-active .grid transform .3s var(--view-transition-easing) = cubic-bezier(.5,.3,0,1); clip-path xywh(… 0 … round 0 0 1.5rem 1.5rem) in beiden Richtungen .3s.",
   "art": "website"
  },
  {
   "seite": "Fiddle.Digital",
   "url": "https://fiddle.digital/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Inline-CSS im HTML: Transition -t-clogo Enter translate .9s var(--f-cubic) von −120 %, Leave .6s nach +120 %; -t-m-splash Enter scale 1.2s var(--f-cubic) = cubic-bezier(.22,.31,0,1), Leave 1.2s var(--f-cubic-in) = cubic-bezier(.69,0,0,1) mit 0,3 s Verzögerung; -t-aim Enter mit --f-fast = cubic-bezier(0,.81,.35,1), Leave mit --f-cubic.",
   "art": "website"
  },
  {
   "seite": "Wokine",
   "url": "https://www.wokine.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Inline-CSS im HTML: Nuxt-Transition fadeIn: Enter transform .48s + opacity .32s cubic-bezier(.36,.33,0,1) mit .24s Verzögerung von translateY(10px); Leave nur opacity .24s und display none – Ausblenden in der halben Zeit ohne Bewegung.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP 3.15: easeReverse",
   "url": "https://gsap.com/blog/3-15/"
  },
  {
   "titel": "Codrops: A Playful Clip Menu with GSAP's easeReverse",
   "url": "https://tympanus.net/codrops/2026/04/22/a-playful-clip-menu-with-gsaps-easereverse/"
  },
  {
   "titel": "Codrops EaseReverseClipMenu (Repo)",
   "url": "https://github.com/codrops/EaseReverseClipMenu"
  },
  {
   "titel": "Codrops: A Playful Clip Menu with GSAP's easeReverse (04/2026)",
   "url": "https://tympanus.net/codrops/?p=114731"
  }
 ],
 "kombinierbar_mit": [
  "galerie-shared-element-vollbild",
  "akkordeon-panels",
  "token-studio-signatur",
  "akkordeon-hoehe-auto",
  "einblenden-starting-style",
  "token-federnd-verspielt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "hover.json",
   "patch-belege-2.json",
   "r3-belege-a.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 1 Produktionsbeleg; easeReverse nur als GSAP-Bibliothekscode in Bundles (OFF+BRAND, Trionn), keine Anwendung nachweisbar. Ziel ≥2 nicht erreicht.",
   "r3-belege-a.json (Runde 3, 31.10.2026): Alle drei nutzen getrennte Vue/Nuxt-Klassen *-enter-active und *-leave-active statt GSAP easeReverse. In den Produktions-Bundles wurde kein easeReverse-Aufruf mit Wert gefunden; der String steckt nur im GSAP-Kern."
  ],
  "zusammengelegt_aus": [
   "token-toggle-asymmetrisch",
   "asymmetrisches-timing"
  ],
  "querverweis_kategorien": [
   "Mikroanimationen"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Mega-Menü öffnet mit Ausklang in 1,1 s und schließt mit Anlauf-Kurve in zwei Dritteln der Zeit, ohne wie zurückgespult zu wirken.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0"
  ],
  "werte": {
   "gsap_timeline": "gsap.timeline({ paused: true, defaults: { duration: 0.8, ease: 'back.out(1.7)', easeReverse: 'expo.in' } })",
   "panel": "clip-path inset(0% 0% 100% 0% round 0 0 24px 24px) → inset(0%) · 800 ms · ease expo.out = cubic-bezier(0.16, 1, 0.3, 1) · easeReverse expo.in ≈ cubic-bezier(0.7, 0, 0.84, 0)",
   "links": "yPercent 115 → 0 · 800 ms back.out(1.7) = cubic-bezier(0.34, 1.56, 0.64, 1) · Start 120 ms · stagger 50 ms",
   "karten": "scale 0.9 → 1, opacity 0 → 1 · 800 ms back.out(1.7) · Start 180 ms · stagger 60 ms",
   "panel_fuss": "opacity 0 → 1 · 600 ms linear · Start 300 ms",
   "oeffnen": "tl.timeScale(1).play() · gesamt 1100 ms",
   "schliessen": "tl.timeScale(1.5).reverse() · gesamt 733 ms · Versatz rückwärts 33/40 ms · Elemente mit easeReverse expo.in",
   "schliessen_unterbrochen": "tl.timeScale(2).reverse(); GSAP rechnet die Rückwärtskurve ab dem Wendepunkt neu",
   "css_variante_auf": "transition 800 ms cubic-bezier(0.19, 1, 0.22, 1); Links Verzögerung 120 ms + i × 50 ms; Karten 180 ms + i × 50 ms (Collins)",
   "css_variante_zu": "transition 300 ms cubic-bezier(0.5, 0.3, 0, 1); Versatz 25 ms in umgekehrter Reihenfolge; Panel 75 ms verzögert; gesamt 400 ms (Collins, Verhältnis 0,375)",
   "css_regel": "Die transition am Zielzustand gilt: Grundzustand = Schließen, .offen = Öffnen",
   "hover_links": "Unterstrich scale 0 → 1 · rein 600 ms expo.out · raus 350 ms expo.in",
   "kopf_und_knopf": "Wortwechsel Menü/Schließen rein 600 ms expo.out, raus 300 ms expo.in; Plus-Drehung 135° rein 800 ms expo.out, raus 300 ms expo.in; Kopffarbe 150 ms linear, folgt der Panelkante",
   "gegenbeispiel": "Gespiegelt: tl.reverse() ohne easeReverse, timeScale 1 → 1100 ms, back.in-Ausholen vor dem Schließen",
   "reduziert": "beide Richtungen 150 ms opacity linear, kein Weg"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten wie am Desktop: Tippen auf den Menüknopf öffnet und schließt. Die Hover-Unterstreichung der Links entfällt. Auf schmalen Bildschirmen stehen Links und Karten untereinander.",
  "reduziert": "Panel blendet in beide Richtungen in 150 ms linear über. Kein Clip, kein Weg, keine Staffelung; Knopf-Details wechseln in 150 ms.",
  "korrekturen": {
   "beschreibung": "Öffnen und Schließen bekommen bewusst unterschiedliche Kurven und Tempi. Öffnen läuft genüsslich mit Ausklang-Kurve (expo.out oder back.out). Schließen ist schneller und hat eine Anlauf-Kurve (expo.in, sine.in) oder eine eigene kurze Kurve. So wirkt es nicht wie ein rückwärts abgespieltes Video. Seit GSAP 3.15 (April 2026) geht das mit easeReverse direkt am Tween oder in den Timeline-Defaults.",
   "warum_es_wirkt": "Öffnen ist eine Einladung, Schließen eine Bestätigung, die schnell aus dem Weg gehen soll. Exakt rückwärts abgespielte Animationen fühlen sich falsch an: Eine Überschwinger-Kurve holt beim Schließen erst aus, und das Schließen dauert so lange wie das Öffnen. Die eigene Schließbewegung wirkt natürlicher und souveräner.",
   "wann_einsetzen": "Alle umschaltbaren UI-Teile: Menüs, Overlays, Modals, Lightboxen, Drawer, Dropdowns, Akkordeons, Tooltips und Hover-Effekte mit Rückweg.",
   "wann_nicht": "Bei Scroll-gescrubbten Animationen, dort muss rückwärts exakt vorwärts spiegeln. Bei sehr kurzen Mikro-Übergängen unter 150 ms, dort ist der Unterschied nicht wahrnehmbar.",
   "varianten": [
    "GSAP easeReverse mit eigener Kurve, z. B. ease back.out(1.7), easeReverse expo.in oder sine.in",
    "GSAP easeReverse: true (gleiche Kurve, für die Rückrichtung angepasst)",
    "Zusätzlich timeScale 1,5 beim Schließen, beim unterbrochenen Schließen 2",
    "CSS: eigene transition im offenen Zustand und im Grundzustand (die Regel am Zielzustand gilt)",
    "Nur Tempo: rein langsam, raus schnell, z. B. 600/350 ms oder 800/300 ms"
   ],
   "umsetzung": "GSAP: gsap.timeline({ paused: true, defaults: { ease: 'back.out(1.7)', easeReverse: 'expo.in' } }). Öffnen mit tl.timeScale(1).play(), Schließen mit tl.timeScale(1.5).reverse(). Wird mitten im Öffnen geschlossen, rechnet GSAP die Rückwärtskurve ab dem Wendepunkt neu; dazu timeScale(2). CSS: die transition am Zielzustand gilt. Beispiel: .panel { transition: clip-path .3s cubic-bezier(.5,.3,0,1) } .offen .panel { transition: clip-path .8s cubic-bezier(.19,1,.22,1) }. Staffelung beim Öffnen 40 bis 60 ms, beim Schließen 20 bis 30 ms in umgekehrter Reihenfolge. Schließen dauert typisch 40 bis 67 % des Öffnens.",
   "mobil": "Unverändert. Auf Touch gilt dasselbe Paar aus Kurven und Dauern.",
   "reduzierte_bewegung": "Beide Richtungen als 150-ms-Überblendung ohne Weg.",
   "barrierefreiheit": "aria-expanded wechselt mit dem Zustand, nicht mit dem Animationsende. Beim Öffnen geht der Fokus in den Inhalt, beim Schließen zurück zum Auslöser. Esc schließt. Geschlossene Inhalte sind inert. Das Fokus-Management hängt nicht an der Animation."
  },
  "geprueft": "31.10.2026",
  "notiz": "Mega-Menü eines erfundenen Kölner Designateliers. Drei Varianten: easeReverse (GSAP 3.15, timeScale 1,5), CSS-Transition mit den Collins-Werten und das gespiegelte Gegenbeispiel. Eine Messleiste zeigt beide Richtungen mit Kurve und Dauer, die Balkenlänge entspricht der Zeit. Die Kopffarbe folgt der Panelkante. Vorschau: gezeichneter Zeiger öffnet und schließt in Schleife. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .56 → .66, Kopf-Labels opacity .55 → .66, Werte-Bezeichner .4 → --leise, ruhende Messspur .42 → .64 (alle ≥ 4,6:1); Akzentwort im Titel #2aa79b → #229387 (3,2:1, groß); Kontrastmodus-Rahmen für Knöpfe."
 }
}