Plugin-Installationen: Vor Setup- oder Aktualisierungsbefehlen die Plugin-Installationsregeln befolgen, wenn sich dieser Skill innerhalb eines HyperFrames-Plugins befindet. Bei eigenständigen Installationen gelten die untenstehenden Aktualisierungshinweise.
HyperFrames Animation
Das gesamte Bewegungs- und Animationswissen in einem Skill: Regeln (atomare Rezepte), Vorlagen (mehrphasige Szenenvorlagen), Übergänge (Szene-zu-Szene), Techniken (breitere Motion-Design-Muster) und Adapter (runtime-spezifische APIs).
Für den Kompositionsvertrag (Datenattribute, Unterkompositionen, Determinsmus) siehe hyperframes-core.
Standard: atomare Regeln kombinieren
2-4 Regeln aus rules-index.md auswählen, mit einer einzigen pausierten GSAP-Timeline verknüpfen – fertig. Dies ist schneller und erzeugt weniger Code als der Start mit einer Vorlage.
Eine Vorlage laden, wenn
- Die Szene zu einer bestehenden, vordefinierten mehrphasigen Vorlage passt (Marken-Enthüllung, sozialer Beweis usw.) und die Wiederverwendung ihrer Phasen-Pipeline echte Zeit beim Authoring spart.
- Sie ausführbaren, verifizierten Code für eine komplexe 4-5-phasige Choreografie benötigen.
Vorlagen befinden sich in blueprints-index.md. Jeder Eintrag verweist auf blueprints/<id>.md (Rezept). Nicht spekulativ lesen; laden Sie sie erst, wenn Sie sich für eine Szenen-orchestrierung entschieden haben.
Navigation
| Was möchten Sie tun… | Lesen Sie |
|---|---|
| Ein atomares Bewegungsmuster nach Trigger/Tag auswählen | rules-index.md |
| Das vollständige HTML/CSS/GSAP-Rezept einer Regel lesen | rules/<name>.md |
| Eine mehrphasige Szenenvorlage auswählen | blueprints-index.md |
| Das vollständige Rezept einer Vorlage lesen | blueprints/<id>.md |
| Einen Szenenübergang erstellen (CSS-gesteuert, zwischen zwei Clips) | transitions/overview.md, transitions/catalog.md |
| Eine breitere Motion-Design-Technik nachschlagen | techniques.md |
| Bewegungsunschärfe – Shutter-Smear auf einem Element und wann man sie nicht verwenden sollte | references/motion-blur.md |
| Eine bestehende Komposition auf ihre Animationskarte analysieren | scripts/animation-map.mjs |
| GSAP API – Timeline/Tweens/Positionsparameter | adapters/gsap.md |
| GSAP – fertige Effektrezepte | rules/gsap-effects.md |
| GSAP – Transformationen/Leistung | adapters/gsap-transforms-and-perf.md |
| GSAP – Easings/Stagger | adapters/gsap-easing-and-stagger.md |
| GSAP – Timeline/Labels | adapters/gsap-timeline-and-labels.md |
Lottie/dotLottie (After Effects Exporte, window.__hfLottie) | adapters/lottie.md |
| Charakteranimation (Gehzyklus, Maskottchen, gegliederte Puppe, Gestik) | adapters/lottie.md → Charaktere |
Three.js/WebGL (3D-Szenen, AnimationMixer, hf-seek) | adapters/three.md |
Anime.js (window.__hfAnime) | adapters/animejs.md |
CSS-Keyframes (animation-delay/play-state/fill-mode) | adapters/css-animations.md |
Web Animations API (element.animate(), currentTime Seek) | adapters/waapi.md |
TypeGPU/WebGPU (navigator.gpu, WGSL, Compute-Pipelines) | adapters/typegpu.md |
HTML-als-Textur + WebGL/GLSL Post-FX (Live-DOM via drawElementImage erfassen) | adapters/html-in-canvas-patterns.md |
Benannte Textanimationseffekte (24 IDs via externem animate-text-Skill) | adapters/animate-text.md |
Laufzeit auswählen
- GSAP ist der Standard für 95% der Bewegungsarbeit – deckt Timeline-Orchestrierung, Transformationen, Easings und Stagger ab. Alle atomaren Regeln in diesem Skill basieren auf GSAP.
- Lottie wenn ein Asset eine eigene vorgefertigte Timeline hat (typischerweise After Effects Exporte), einschließlich Charakteren, die gehen, gestikulieren oder reagieren.
- Three.js für 3D-Szenen, Kamerabewegungen, shader-basierte Visualisierungen.
- Anime.js für leichtgewichtige Tweens, wenn GSAP übertrieben ist.
- CSS für einfache, sich wiederholende Motive, Dekoration, Schimmer – ohne JavaScript-Animation.
- WAAPI für native Browser-Keyframes ohne GSAP-Abhängigkeit.
- TypeGPU/WebGPU für GPU-gerenderte Canvas (Partikel, Flüssigglas, benutzerdefinierte Shader).
Mehrere Laufzeiten können in einer Komposition koexistieren. Jede registriert ihre Instanzen auf dem laufzeitspezifischen Global, sodass HyperFrames alle in einem Durchlauf suchen kann.
Kritische Einschränkungen
Voraussetzung: hyperframes-core → Eine pausierte Timeline + Nicht verhandelbare Regeln (eine einzige pausierte Timeline, data-duration bestimmt die Länge, kein Math.random/Date.now/performance.now, kein repeat: -1 ohne eine endliche root data-duration, kein gsap.set bei Seitenladevorgang auf späteren Szenen-Clips, keine display- oder rohen visibility-Tweens, und die Timeline erst registrieren, wenn sie vollständig aufgebaut ist – auch wenn der Aufbau in einem asynchronen Callback wie document.fonts.ready läuft). GSAP autoAlpha und null-dauernde Visibility-Sets an expliziten Timeline-Grenzen bleiben vom Kern erlaubt. Verwenden Sie diese Ausnahmen nur auf Nicht-Clip-Elementen oder Wrappern innerhalb eines Clips; das Framework besitzt den .clip-Lebenszyklus. Den vollständigen Vertrag hier nicht wiederholen.
Zusätzliche Animationsrichtlinien zum Kernvertrag:
- Vorberechnete Layout-Konstanten – Positionen niemals mittels
getBoundingClientRect()zur Tween-Zeit ableiten. Tween-Zeit-DOM-Messungen desynchronisieren, da der Renderer parallel abtastet; Koordinaten einmal bei der Kompositionseinrichtung berechnen und wiederverwenden. - Räumliche Bewegungen verwenden ausschließlich GSAP-Transformationsaliase (
x,y,scale,rotation). Die Zulassungsliste des Kerns erlaubt auchopacity/color/backgroundColor/borderRadiusfür nicht-räumliche Eigenschafts-Tweens – aber niemalswidth/height/top/leftfür Layout-Änderungen.
Skripte
node <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
Liest jede auf window.__timelines registrierte GSAP-Timeline, zählt Tweens, tastet Bounding-Boxen ab, berechnet Flags und gibt animation-map.json aus. Verwenden Sie es, um nach dem Authoring die Choreografie zu auditieren (tote Zonen, Stagger-Konsistenz, Lebenszyklus-Warnungen).
animation-map.mjs löst zuerst Hilfspakete aus dem aktuellen Projekt auf und kann dann die gebündelte HyperFrames-Paketversion bootstrappen. Setzen Sie HYPERFRAMES_SKILL_PKG_VERSION=<version> nur, wenn Sie den Skill außerhalb der gebündelten CLI/Skill-Installation ausführen und diese Bootstrap-Version explizit festlegen möchten.
Siehe auch
hyperframes-core– Kompositionsstruktur, Datenattribute, Unterkompositionen, deterministischer Rendering-Vertraghyperframes-creative– Paletten, Typografie, Erzählung, Beat-Planung (nicht-animationsbezogene kreative Richtung)hyperframes-cli–npx hyperframes lint / check / snapshot / preview / render