{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "menue-choreografie-wipe-clip", "name": "Menü-Choreografie: Panel-Wipe bzw. Clip-Reveal mit asymmetrischem Schließen", "name_en": "Layered wipe / clip-path menu reveal with easeReverse", "kurz": "Drei Farbpanels wischen gestaffelt herein, dann steigen die Links gedreht aus ihren Masken; geschlossen wird rückwärts, 1,5-mal schneller und mit eigener Kurve.", "kategorie": "Navigation", "kategorie_slug": "navigation", "kategorie_nr": 3, "bau_chat": "C3", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "website_belege": 3, "stimmung": [ "editorial", "präzise", "verspielt", "laut" ], "stimmung_roh": [ "verspielt", "laut", "präzise", "editorial" ], "technik": [ "gsap", "customease", "css", "clip-path", "vanilla-js" ], "technik_gruppen": [ "css", "js", "gsap" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "1) Klick auf den Menüknopf: zwei bis drei farbige Panels fahren nacheinander von der Seite herein (xPercent 101 → 0). Alternativ öffnet sich ein Clip-Path vom Knopf aus (circle, inset oder polygon). 2) Kurz bevor das letzte Panel steht, steigen die Menülinks aus ihren Masken nach oben, leicht gedreht (10°) und gestaffelt. 3) Danach blenden Nebeninhalte wie Adresse, Social und Kleingedrucktes mit kleinem Versatz ein. 4) Ein halbtransparenter Schleier dunkelt die Seite ab, ein Klick darauf schließt. 5) Zum Schließen läuft dieselbe Timeline rückwärts, aber 1,5-mal schneller und mit eigener Kurve (GSAP easeReverse). Wird mitten in der Bewegung umgeschaltet, rechnet GSAP die Kurve ab dem Umkehrpunkt neu.", "warum_es_wirkt": "Die Schichten erzeugen Tiefe und Rhythmus, die Staffelung führt den Blick vom Hintergrund zu den Links. Das asymmetrische Timing trifft die Erwartung: Öffnen darf inszeniert sein, Schließen muss sofort reagieren. Weil die Bewegung jederzeit umkehrbar ist, hängt das Menü nie.", "wann_einsetzen": "Overlay- oder Seitenleisten-Navigation mit Markencharakter, vor allem bei Studios, Agenturen und Kampagnenseiten.", "wann_nicht": "Wenn das Menü sehr oft geöffnet wird, etwa in Web-Apps oder Dokumentationen. Dort höchstens 200 bis 300 ms und keine mehrstufige Choreografie.", "varianten": [ "Seitenleiste mit drei gestaffelten Farbpanels, die von rechts hereinwischen (Osmo)", "Clip-Path-Kreis wächst aus dem Menüknopf (Codrops, TRIONN)", "Vorhang: clip-path polygon fährt von unten auf volle Fläche (Stewart & Partners)", "Vorhang von oben mit konkaver SVG-Kante (Shape-Overlay)", "Radialmenü (GSAP-3.15-Demo)" ], "umsetzung": "Beim Init eine pausierte GSAP-Timeline bauen: Panels (xPercent 101 → 0, stagger), Links (yPercent 140, rotate 10 → 0) über den Positionsparameter verzahnt, danach die Fades. Umschalten: offen ? tl.timeScale(1).play() : tl.timeScale(1.5).reverse(). Ab GSAP 3.15 easeReverse in den Timeline-defaults setzen (true für die gespiegelte Kurve oder eine eigene, z. B. \"power3.out\"); das ersetzt das veraltete yoyoEase. Für die Kreis-Variante clip-path: circle(0px at X Y) → circle(R at X Y), X und Y aus getBoundingClientRect des Knopfs, R als Abstand zur fernsten Ecke. Fallstricke: display:none am Container verhindert das Messen, besser visibility bzw. autoAlpha. Panels mit will-change: transform. Klicks nur auf echten