Home / All Skills / Design & Motion / gsap
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · nateherkai/hyperframes-student-kit

gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author nateherkaiGitHub nateherkai/hyperframes-student-kit ↗Stars 1070License NOASSERTION（仓库根 LICENSE，实为 MIT 文本）Commit 0d30152a82
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The skill itself is a GSAP quick-reference cheat sheet compressed to 6KB, organized by API surfaces (Tween methods → common vars options → transform aliases → easing → defaults → playback control → matchMedia → Timeline → performance → reference files), ready for on-demand lookup while agents write HyperFrames compositions.

.claude/skills/gsap/SKILL.md
GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo).
It contains no workflow orchestration or script scheduling—it serves purely as a knowledge base referenced during Steps by skills such as ../hyperframes and make-a-video.

Prevents common agent pitfalls through strict conventions: mandates camelCase property names, prefers transform aliases over string concatenation, and prioritizes autoAlpha over opacity.

.claude/skills/gsap/SKILL.md
Always use **camelCase** property names (e.g. `backgroundColor`, `rotationX`). … - **autoAlpha** — prefer over `opacity`. At 0: also sets `visibility: hidden`.
The same section provides a mapping table for x/y/z, xPercent/yPercent, rotation/rotationX, skewX/Y, and transformOrigin to prevent handwritten transform strings from breaking GSAP overrides.

Establishes Timeline as the primary choreography mechanism and provides four ways to write position parameters (absolute values, relative `+=`/`-=`, labels, and `<`/`>` alignments).

.claude/skills/gsap/SKILL.md
- **Alignment**: `"<"` — same start as previous; `">"` — after previous ends; `"<0.2"` — 0.2s after previous starts
Accompanied by complete controls including addLabel/play(label)/tweenFromTo, constructor defaults, nested master.add(child, 0), as well as play/pause/reverse/restart/time/progress/kill.

Sets the performance benchmark as 'staying on the compositor': mutate only x/y/scale/rotation/opacity, avoid animating layout properties, apply will-change only to elements that actually animate, use quickTo for high-frequency updates, prefer stagger over multiple tweens, and clean up when no longer needed.

.claude/skills/gsap/SKILL.md
Animating `x`, `y`, `scale`, `rotation`, `opacity` stays on the compositor. Avoid `width`, `height`, `top`, `left` when transforms achieve the same effect.
Concludes with Cleanup and Do Not checklists (Animate layout properties… / Create tweens before the DOM exists / Skip cleanup), formatting common anti-patterns as strict negative rules.

Handles accessibility and responsiveness with gsap.matchMedia(): automatically reverts when conditions no longer match, with examples integrating directly with prefers-reduced-motion.

.claude/skills/gsap/SKILL.md
Runs setup only when a media query matches; auto-reverts when it stops matching. … reduceMotion: "(prefers-reduced-motion: reduce)",
The example uses duration: reduceMotion ? 0 : 2—meaning it snaps directly to the initial frame under reduced motion preferences rather than skipping rendering entirely.

references/effects.md provides two drop-in effects (typewriter and audio visualizer), emphasizing that all effects must adhere to HyperFrames determinism rules.

.claude/skills/gsap/references/effects.md
All effects follow HyperFrames composition rules — deterministic, no randomness, timelines registered via `window.__timelines`.
Audio visualization requires synchronous data loading: the documentation explicitly states 'Do NOT use async `fetch()` to load audio data.', because the capture engine reads window.__timelines synchronously after page load.

Includes a Python script to convert audio into frame-by-frame visualization data: decodes audio via ffmpeg into mono 44.1kHz samples, runs numpy RMS and logarithmic frequency-band FFT, and outputs JSON ready to embed into compositions.

.claude/skills/gsap/scripts/extract-audio-data.py
Outputs JSON with RMS amplitude and frequency band data at the target FPS, ready to embed in a HyperFrames composition. … cmd = [ "ffmpeg", "-i", path, "-vn", "-ac", "1", "-ar", str(SAMPLE_RATE), "-f", "s16le", "-acodec", "pcm_s16le", "-loglevel", "error", "pipe:1", ] … result = subprocess.run(cmd, capture_output=True)
Defaults to 30fps and 16 frequency bands; uses a 4096 FFT window (~10.8Hz/bin at 44.1kHz), spans a 30Hz–16kHz range, and performs normalization across two passes.

2Core Capabilities

01Tween method quick reference: semantics and use cases for to / from / fromTo / set (set = duration 0 applied immediately)
02Common vars reference: duration / delay / ease / stagger / overwrite / repeat / yoyo / callbacks / immediateRender
03Transform alias mapping table (avoiding handwritten transform strings) + directional rotation and relative value syntax
04Easing reference and global defaults configuration
05Runtime tween controls (pause/play/reverse/kill/progress/time) with the requirement to store return values
06Complete Timeline choreography: creation + defaults, position parameters, labels, nesting, and playback controls
07Responsive design + reduced motion: automatic revert via gsap.matchMedia(), with examples binding reduceMotion to duration
08Performance specifications: compositor-friendly properties, will-change discipline, quickTo for high-frequency updates, stagger over multiple tweens, and cleanup
09Ready-to-use effect library (loaded on demand): typewriter (TextPlugin, including cps tier recommendations) and audio visualization
10Local script converting audio into frame-by-frame RMS/frequency band JSON for direct consumption by audio visualizers

3External Dependencies

KindDependency / Endpoint
packageGSAP 3.14.2（随仓库 npm ci 安装；上游来自 heygen-com/hyperframes 技能生态）
networkcdn.jsdelivr.net（**产物期**：effects.md 给出的示例片段在生成的 HTML 里用 script 标签引 gsap@3.14.2 与 TextPlugin；执行 skill 时并不外发）
cliffmpeg（extract-audio-data.py 用它解码音频为 s16le 管道）
packagenumpy（脚本内 FFT/RMS 计算，需 pip 安装）
cliPython 3.9+（跑 extract-audio-data.py）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Executes local script or command: python3 .claude/skills/gsap/scripts/extract-audio-data.py <audio-or-video>
  • 网络端点: Declares external network access: Artifact-phase (unrated): example snippets in references/effects.md reference cdn.jsdelivr.net in generated composition HTML
  • 本地工作目录: File I/O and artifact output: audio-data.json (specified via -o/--output, writes to current directory by default; contains frame-by-frame rms + bands values)
Audit Notes: The evaluation target is this skill's own directory (SKILL.md + references/effects.md + scripts/extract-audio-data.py + NOTICE.txt, 4 files total): it consists predominantly of pure documentation; the sole executable code is a local Python script performing ffmpeg decoding + numpy FFT and persisting JSON to disk; no network calls, no credential reading, no attack surface outside subprocess execution, and no file deletion operations. The jsdelivr CDN mentioned in documentation is an 'artifact-phase reference' (loaded by the browser in generated HTML, not requested during skill execution); per categorization rules, it is not factored into rating and is only listed in reason and external_deps. No red-tier characteristics exist (no sandbox disabling, no TLS downgrade, no anti-scraping bypass, no arbitrary code execution surface).

5Second-Pass Verification

  • [ok] 文件清单与类型 — SKILL.md（6.4KB 文档）、references/effects.md（8.8KB 文档）、scripts/extract-audio-data.py（6.5KB 脚本）、NOTICE.txt（228B 声明）；无隐藏文件、无 node_modules、无二进制资产。
  • [ok] 网络外发反例搜索 — 目录内 3 条 http 命中：effects.md 两行 jsdelivr script 标签（产物期示例）与 NOTICE.txt 的 https://github.com/heygen-com/hyperframes（出处链接）。fetch( 命中位于『**Do NOT use async `fetch()` to load audio data.**』这句告诫中，非调用。
  • [ok] 凭证面反例搜索 — 0 处 env/API_KEY/TOKEN/SECRET 命中；Python 脚本 import 仅 argparse/json/subprocess/sys/numpy。
  • [ok] description 覆盖度核对 — 描述里点名的每一项都能在正文定位到专节：Core Tween Methods / Common vars（stagger、defaults）/ Easing / Timelines（position parameter、labels、nesting、playback）/ Performance（transforms、will-change、quickTo）。无夸大。
  • [ok] 脚本产物与用法核对 — main() 用 argparse 提供 input/-o/--fps/--bands，默认 audio-data.json、30fps、16 段；输出结构含 duration/fps/bands/totalFrames/frames[{time,rms,bands[]}]，与 effects.md 里展示的 JSON 结构一致。
  • [ok] 上游归属与许可 — NOTICE.txt 声明来源 heygen-com/hyperframes（Apache-2.0），并注明 student-kit 只做 runtime-relative 路径与可移植打包；与仓库 skills-lock.json 中 gsap 条目指向的 source 一致。

6Verdict & Scenarios

  • Right-sized for its purpose: 6KB covering the exact subset of APIs an agent needs when writing HyperFrames animations, enabling fast lookups without being overwhelmed by irrelevant details.
  • Convention-driven error prevention: hard rules that directly reduce rework, such as camelCase, transform alias tables, autoAlpha, constructor defaults, and position parameters over delay.
  • Performance section provides actionable criteria ('stay on the compositor') paired with a Do Not list, rather than vague optimization advice.
  • Accessibility-conscious: matchMedia examples integrate prefers-reduced-motion directly, zeroing out duration rather than failing to render.
  • Includes reusable effects and accompanying local tooling (frame-by-frame audio data), removing the guesswork around data formatting for audio visualization.
  • Transparent licensing: NOTICE.txt clearly indicates upstream provenance and Apache-2.0, facilitating proper downstream attribution.
    • Best for: Best for: Agents or authors writing manual GSAP timelines inside HyperFrames compositions (especially when needing position parameters, labels, nesting, and session performance guidelines), as well as those looking for ready-made templates for typewriter or audio visualizer effects.
    Not for: Not suitable for: Anyone looking for full GSAP documentation or plugin manuals (ScrollTrigger, SplitText, etc. are only briefly mentioned), non-GSAP animation stacks, or users expecting it to manage build/rendering pipelines—it does not touch the rendering pipeline.
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload gsap.tar.gz
    sha256: 68a50bcbc9292840…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 0d30152a82.