Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
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, 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/<id>.md (recipe). 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/<name>.md |
| Pick a multi-phase scene template |
blueprints-index.md |
| Read one blueprint's full recipe |
blueprints/<id>.md |
| Author a scene transition (CSS-driven, between two clips) |
transitions/overview.md, transitions/catalog.md |
| Look up a broader motion-design technique |
techniques.md |
| Motion blur — shutter smear on an element, and when not to use it |
references/motion-blur.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 |
| Character animation (walk cycle, mascot, jointed puppet, gestures) |
adapters/lottie.md → Characters |
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), including characters that walk, gesture or react.
- 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 → One paused timeline + Non-negotiable rules (single paused timeline, data-duration governs length, no Math.random / Date.now / performance.now, no repeat: -1 without a finite root data-duration, no page-load gsap.set on later-scene clips, no display or raw visibility tweens, and register the timeline only after it is fully built, including when the build runs inside an async callback such as document.fonts.ready). GSAP autoAlpha and zero-duration visibility sets at explicit timeline boundaries remain allowed by core. Use those exceptions only on non-clip elements or wrappers inside a clip; the framework owns .clip lifecycle. Don't restate the full contract 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
node <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.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.
animation-map.mjs resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set HYPERFRAMES_SKILL_PKG_VERSION=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
See Also
hyperframes-core — composition structure, data attributes, sub-compositions, deterministic render contracthyperframes-creative — palettes, typography, narration, beat planning (non-animation creative direction)hyperframes-cli — npx hyperframes lint / check / snapshot / preview / render
1---2name: "hyperframes-animation"3description: "All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic."4metadata:5 source: https://skillmd.com/skills/rghrmkr1993/hyperframes-animation6---78**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.910# HyperFrames Animation1112All 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).1314For the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`.1516## Default: compose atomic rules1718Pick 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.1920## Load a blueprint when2122- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time23- You want runnable ground-truth code for a complex 4-5 phase choreography2425Blueprints live in `blueprints-index.md`. Each entry points to `blueprints/<id>.md` (recipe). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.2627## Routing2829| Want to… | Read |30| ------------------------------------------------------------------------------ | --------------------------------------------------- |31| Pick an atomic motion pattern by trigger / tag | `rules-index.md` |32| Read one rule's full HTML / CSS / GSAP recipe | `rules/<name>.md` |33| Pick a multi-phase scene template | `blueprints-index.md` |34| Read one blueprint's full recipe | `blueprints/<id>.md` |35| Author a scene transition (CSS-driven, between two clips) | `transitions/overview.md`, `transitions/catalog.md` |36| Look up a broader motion-design technique | `techniques.md` |37| Motion blur — shutter smear on an element, and when not to use it | `references/motion-blur.md` |38| Analyze an existing composition's animation map | `scripts/animation-map.mjs` |39| GSAP API — timeline / tweens / position parameters | `adapters/gsap.md` |40| GSAP — drop-in effect recipes | `rules/gsap-effects.md` |41| GSAP — transforms / perf | `adapters/gsap-transforms-and-perf.md` |42| GSAP — eases / stagger | `adapters/gsap-easing-and-stagger.md` |43| GSAP — timeline / labels | `adapters/gsap-timeline-and-labels.md` |44| Lottie / dotLottie (After Effects exports, `window.__hfLottie`) | `adapters/lottie.md` |45| Character animation (walk cycle, mascot, jointed puppet, gestures) | `adapters/lottie.md` → Characters |46| Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`) | `adapters/three.md` |47| Anime.js (`window.__hfAnime`) | `adapters/animejs.md` |48| CSS keyframes (`animation-delay` / `play-state` / `fill-mode`) | `adapters/css-animations.md` |49| Web Animations API (`element.animate()`, `currentTime` seek) | `adapters/waapi.md` |50| TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines) | `adapters/typegpu.md` |51| HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) | `adapters/html-in-canvas-patterns.md` |52| Named text-animation effects (24 IDs via external `animate-text` skill) | `adapters/animate-text.md` |5354## Picking a runtime5556- **GSAP** is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.57- **Lottie** when an asset has its own pre-baked timeline (typically After Effects exports), including characters that walk, gesture or react.58- **Three.js** for 3D scenes, camera motion, shader-driven visuals.59- **Anime.js** for lightweight tweening when GSAP is overkill.60- **CSS** for simple repeated motifs, decoration, shimmer — no JavaScript animation cost.61- **WAAPI** for native browser keyframes without a GSAP dependency.62- **TypeGPU / WebGPU** for GPU-rendered canvases (particles, liquid glass, custom shaders).6364Multiple 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.6566## Critical Constraints6768**Prerequisite: `hyperframes-core` → One paused timeline + Non-negotiable rules** (single paused timeline, `data-duration` governs length, no `Math.random` / `Date.now` / `performance.now`, no `repeat: -1` without a finite root `data-duration`, no page-load `gsap.set` on later-scene clips, no `display` or raw `visibility` tweens, and register the timeline only after it is fully built, including when the build runs inside an async callback such as `document.fonts.ready`). GSAP `autoAlpha` and zero-duration visibility sets at explicit timeline boundaries remain allowed by core. Use those exceptions only on non-clip elements or wrappers inside a clip; the framework owns `.clip` lifecycle. Don't restate the full contract here.6970Animation-craft additions on top of core's contract:7172- **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.73- **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.7475## Scripts7677```bash78node <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> \79 --out <composition-dir>/.hyperframes/anim-map80```8182Reads 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.8384`animation-map.mjs` resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set `HYPERFRAMES_SKILL_PKG_VERSION=<version>` only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.8586## See Also8788- `hyperframes-core` — composition structure, data attributes, sub-compositions, deterministic render contract89- `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction)90- `hyperframes-cli` — `npx hyperframes lint / check / snapshot / preview / render`
