--- id: gh-hyperframes-animation name: "hyperframes-animation" url: https://skills.yangsir.net/skill/gh-hyperframes-animation author: heygen-com domain: multimedia tags: ["animation", "motion-design", "web-animation", "frontend", "gsap"] install_count: 1000000 rating: 4.90 (120 reviews) github: https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-animation --- # hyperframes-animation > 此技能为 HyperFrames 动画提供全面的知识体系，涵盖原子运动规则、多阶段场景蓝图、场景过渡和广泛的运动设计技术。它集成了 GSAP、Lottie、Three.js 等七种运行时适配器，使开发者能够高效地组合复杂动画、管理场景编排，并在各种平台实现多样化的运动设计，确保动画体验的确定性和寻址安全。 **Stats**: 1,000,000 installs · 4.9/5 (120 reviews) ## Before / After 对比 ### 动画开发效率 **Before**: 在没有此技能之前，开发者手动创建复杂动画、集成不同动画库、确保跨运行时兼容性以及管理场景过渡，耗时且易出错。缺乏统一框架导致动画不确定、寻址不安全，增加了调试工作量和用户体验不一致的风险。 **After**: 该 Skill 通过提供结构化的规则、蓝图和运行时适配器，极大地简化了动画开发流程。它显著减少了集成不同动画工具和调试兼容性问题所需的时间，使开发者能够快速组合复杂的运动设计，并保证动画的确定性和寻址安全，从而提升开发效率和动画质量。 | Metric | Before | After | Change | |---|---|---|---| | 动画集成与调试时间 | 120分钟 | 20分钟 | -83% | ## Readme # HyperFrames Animation All motion knowledge in one skill: **rules** (atomic recipes), **blueprints** (multi-phase scene templates), **transitions** (scene-to-scene), **techniques** (broader motion-design patterns), and **adapters** (per-runtime APIs). For the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`. ## Default: compose atomic rules Pick 2-4 rules from `rules-index.md`, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint. ## Load a blueprint when - The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, demo-page-scroll-spotlight, etc.) and reusing its phase pipeline saves real authoring time - You want runnable ground-truth code for a complex 4-5 phase choreography Blueprints live in `blueprints-index.md`. Each entry points to `blueprints/.md` (recipe) and `examples/.html` (runnable sample). Do not read it speculatively; load it when you've already decided you need scene-level orchestration. ## Routing | Want to… | Read | | ------------------------------------------------------------------------------ | --------------------------------------------------- | | Pick an atomic motion pattern by trigger / tag | `rules-index.md` | | Read one rule's full HTML / CSS / GSAP recipe | `rules/.md` | | Pick a multi-phase scene template | `blueprints-index.md` | | Read one blueprint's full recipe | `blueprints/.md` + `examples/.html` | | Author a scene transition (CSS-driven, between two clips) | `transitions/overview.md`, `transitions/catalog.md` | | Look up a broader motion-design technique | `techniques.md` | | Analyze an existing composition's animation map | `scripts/animation-map.mjs` | | GSAP API — timeline / tweens / position parameters | `adapters/gsap.md` | | GSAP — drop-in effect recipes | `rules/gsap-effects.md` | | GSAP — transforms / perf | `adapters/gsap-transforms-and-perf.md` | | GSAP — eases / stagger | `adapters/gsap-easing-and-stagger.md` | | GSAP — timeline / labels | `adapters/gsap-timeline-and-labels.md` | | Lottie / dotLottie (After Effects exports, `window.__hfLottie`) | `adapters/lottie.md` | | Three.js / WebGL (3D scenes, `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-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) | `adapters/html-in-canvas-patterns.md` | | Named text-animation effects (24 IDs via external `animate-text` skill) | `adapters/animate-text.md` | ## Picking a runtime - **GSAP** is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based. - **Lottie** when an asset has its own pre-baked timeline (typically After Effects exports). - **Three.js** for 3D scenes, camera motion, shader-driven visuals. - **Anime.js** for lightweight tweening when GSAP is overkill. - **CSS** for simple repeated motifs, decoration, shimmer — no JavaScript animation cost. - **WAAPI** for native browser keyframes without a GSAP dependency. - **TypeGPU / WebGPU** for GPU-rendered canvases (particles, liquid glass, custom shaders). Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass. ## Critical Constraints **Prerequisite: `hyperframes-core` → Non-Negotiable Rules** (single paused timeline, `data-duration` governs length, no `Math.random` / `Date.now` / `performance.now`, no `repeat: -1`, no `gsap.set` on later-scene clips, no `display` / `visibility` animation, no timeline construction inside `async` / `setTimeout` / `Promise`). Don't restate those here. Animation-craft additions on top of core's contract: - **Pre-calculated layout constants** — never derive positions from `getBoundingClientRect()` at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse. - **Spatial motion uses GSAP transform aliases only** (`x`, `y`, `scale`, `rotation`). Core's allowlist also permits `opacity` / `color` / `backgroundColor` / `borderRadius` for non-spatial property tweens — but never `width` / `height` / `top` / `left` for layout changes. ## Scripts ```bash node skills/hyperframes-animation/scripts/animation-map.mjs \ --out /.hyperframes/anim-map ``` Reads every GSAP timeline registered on `window.__timelines`, enumerates tweens, samples bboxes, computes flags, outputs `animation-map.json`. Use it to audit choreography (dead zones, stagger consistency, lifecycle warnings) after authoring. ## See Also - `hyperframes-core` — composition structure, data attributes, sub-compositions, deterministic render contract - `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction) - `hyperframes-cli` — `npx hyperframes lint / validate / inspect / preview / render` --- *Source: https://skills.yangsir.net/skill/gh-hyperframes-animation* *Markdown mirror: https://skills.yangsir.net/api/skill/gh-hyperframes-animation/markdown*