VYBE Motion Design
Bewegung ist die Botschaft. Jede Bewegung muss etwas über das Subjekt aussagen – Gewicht, Geschwindigkeit, Selbstvertrauen, Staunen – oder sie sollte nicht existieren.
Alle Rezepte sind für HyperFrames: eine angehaltene GSAP-Timeline pro Komposition,
deterministisch, suchbar. Verwende fromTo für Eintritte, Transform + Opazität +
clipPath + filter für Animationen, niemals Layout-Eigenschaften.
Referenzen (lade die benötigte)
| Datei | Für |
|---|---|
references/animation-principles.md | die 12 Prinzipien angewendet auf UI/Typografie/Grafiken, Easing-Vokabular, Timing-Tabellen |
references/transitions.md | 14 Übergangsrezepte mit GSAP-Code und wann jedes verwendet wird |
references/camera-movements.md | Dolly, Truck, Crane, Orbit, Zoom-Durchreiche, Whip, Rack-Fokus, Parallaxe – 2D und 3D |
references/visual-effects.md | Glühen, Bloom, Lichtleck, Filmkorn, chromatische Aufspaltung, Bewegungsunschärfe, Masken, Morphs |
Die zehn Regeln
- Choreografiere, animiere nicht. Plane, wer zuerst bewegt, wer antwortet, wer hält. Eine Szene ist ein Satz: Subjekt → Verb → Objekt.
- Easing ist Persönlichkeit.
expo.out= erstklassig/selbstbewusst;back.out= verspielt;power2.inOut= mechanische Kamera;sine.inOut= atmend/ambient;none= konstantes Driften. Wähle 2–3 Easings pro Film und bleibe konsistent. - Schnell herein, langsam setzen. Die meisten Eintritte: 0,5–0,9s, 80% des Weges in den ersten 30% der Zeit.
- Austritte sind schneller als Eintritte (≈60%) und verwenden
.in-Easings. - Staffelung zeigt Hierarchie – 0,04–0,08s für Buchstaben, 0,1–0,18s für Wörter, 0,3–0,6s für Listenelemente. Nie alles identisch staffeln.
- Überlappe Aktionen. Das nächste Element beginnt, bevor das vorherige endet
(Positionsparameter
"<0.2"/ absolute Zeiten). Sequentiell = roboterhaft. - Halten zum Lesen. ≈0,3s pro Wort + 0,5s; abschließende Zeilen ≥2s.
- Immer etwas Lebendiges. Während des Haltens hält ein langsamer Push (
scale 1→1,04), Drift oder Lichtwisch den Frame am Leben – aber nur eine Umgebungsbewegung pro Ebene. - Variiere Übergänge. Höchstens ein Schwarzblende pro Film. Bevorzuge Schnitte auf Bewegung, Match Cuts, Masken-Wipes, Zoom-Durchreichen, gemeinsame Elemente.
- Respektiere den Beat. Wenn es Musik gibt, landet jede größere Änderung auf einem Beat
(
60/bpm); Hits landen auf dem Downbeat, Vorbereitung beginnt davor.
Suchbare GSAP-Muster
const tl = gsap.timeline({ paused: true });
// Eintritt: unscharf zu scharf steigend (erstklassig)
tl.fromTo("#s1-title", { opacity: 0, y: 40, filter: "blur(12px)" },
{ opacity: 1, y: 0, filter: "blur(0px)", duration: 0.9, ease: "expo.out" }, 0.2);
// Masken-Wipe-Enthüllung (redaktionell)
tl.fromTo("#s1-line", { clipPath: "inset(0 100% 0 0)" }, { clipPath: "inset(0 0% 0 0)", duration: 0.8, ease: "expo.inOut" }, 0.5);
// Pro-Glyphen-Spread (anstelle von letterSpacing – was der Lint ablehnt)
gsap.utils.toArray("#s1-word .ch").forEach((c, i, all) => {
const off = (i - (all.length - 1) / 2) * -30;
tl.fromTo(c, { x: off, opacity: 0 }, { x: 0, opacity: 1, duration: 1, ease: "expo.out" }, 1 + Math.abs(i - (all.length - 1) / 2) * 0.05);
});
// Count-Up (suchbar: onUpdate läuft bei jeder Suche)
const n = { v: 0 }, el = document.getElementById("s1-num");
tl.fromTo(n, { v: 0 }, { v: 97, duration: 1.4, ease: "expo.out", onUpdate: () => (el.textContent = Math.round(n.v)) }, 1.2);
// Ambienter Halt
tl.fromTo("#s1-stack", { scale: 1 }, { scale: 1.04, duration: 3, ease: "sine.inOut" }, 0);
window.__timelines["s1"] = tl;
Text aufteilen: Wörter/Buchstaben in <span class="w|ch" style="display:inline-block"> packen
(Transforms sind auf Inline-Elementen wirkungslos). Leerzeichen außerhalb der Spans lassen.
Vor der Übergabe
- Keine zwei aufeinanderfolgenden Szenen teilen dieselbe Eingangsbewegung.
- Keine Eigenschaft wird zweimal auf demselben Element zu überlappenden Zeiten getweent.
npx hyperframes checkMotion-Abschnitt ist sauber; für Choreografie-Audits führe das Skriptanimation-map.mjsaus, das mit HyperFrames'/hyperframes-animation-Skill ausgeliefert wird, wenn installiert.