技能 gsap
🎬

gsap

低風險 ⚡ 包含腳本📁 檔案系統存取⚙️ 外部命令

為影片創作專業 GSAP 動畫

為影片創作編寫 GSAP 動畫需要精確的時間控制與確定性的執行。本技能提供全面的 GSAP 文件與 HyperFrames 的即用效果，讓您無需搜尋多個資源即可創建流暢、專業的動畫。

支援: Claude Codex Code(CC)
🥉 73 青銅
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「gsap」。 使用交錯效果為 .card 元素製作動畫，每張卡片之間延遲 0.1 秒，從左側滑入

預期結果:

gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});

正在使用「gsap」。 建構時間軸，先淡入 .logo，然後 .headline 向上滑動，接著在 headline 完成後淡入 .subtitle

預期結果:

const tl = gsap.timeline();
tl.to('.logo', { opacity: 1, duration: 0.4 })
.to('.headline', { y: 0, opacity: 1, duration: 0.5 }, '<')
.to('.subtitle', { opacity: 1, duration: 0.4 }, '+=0.2');

正在使用「gsap」。 以每秒 12 個字元輸入 'Welcome'，游標 '|' 在實心和閃爍狀態之間切換

預期結果:

const text = 'Welcome';
const cps = 12;
tl.call(() => cursor.classList.replace('cursor-blink', 'cursor-solid'), [], t);
tl.to('#typed', { text: { value: text }, duration: text.length / cps, ease: 'none' }, t);
tl.call(() => cursor.classList.replace('cursor-solid', 'cursor-blink'), [], t + text.length / cps);

安全審計

低風險
v1 • 4/27/2026

Static analysis flagged 171 potential issues, but evaluation determined all critical and high findings are false positives. The scanner misidentified HTML script tags as shell commands, FFT signal processing as weak cryptography, and generic variable names as credential access patterns. The Python audio extraction script uses subprocess to run ffmpeg for legitimate audio processing. No malicious behavior or user input injection vectors detected.

3
已掃描檔案
699
分析行數
8
發現項
1
審計總數

高風險問題 (2)

scripts/extract-audio-data.py:72scripts/extract-audio-data.py:83scripts/extract-audio-data.py:167
Static Analysis False Positive: Weak Cryptographic Algorithm
The static scanner flagged np.fft.rfft() and related operations as 'weak cryptographic algorithm'. This is incorrect - these are standard Fast Fourier Transform operations used for audio signal processing, not cryptography. FFT decomposes audio signals into frequency components for visualization.
scripts/extract-audio-data.py:37scripts/extract-audio-data.py:47
Static Analysis False Positive: Credential Access Patterns
The scanner flagged variable names like 'samples', 'SAMPLE_RATE', and file references as 'Windows SAM database' access. This is pattern-matching noise - the skill has no access to Windows credentials. Variables are standard Python naming for audio sample data.
中風險問題 (1)
references/effects.md:5SKILL.md:10
Static Analysis False Positive: Ruby/Shell Command Execution
The static scanner flagged 139 instances of 'Ruby/shell backtick execution' in references/effects.md and SKILL.md. These are false positives - the scanner detected HTML script tags like '<script src="https://...">' and markdown code snippets as shell commands. These are legitimate CDN URL references and documentation code examples.
低風險問題 (2)
scripts/extract-audio-data.py:52
Python subprocess.run for FFmpeg
The extract-audio-data.py script uses subprocess.run() to invoke ffmpeg for audio decoding. This is a standard audio processing pattern with no injection risk - the command arguments are hardcoded except for the input path from command-line arguments.
references/effects.md:218
XMLHttpRequest Usage for Audio Data Loading
The audio visualizer effect uses synchronous XMLHttpRequest to load audio data files. This is documented as intentional for HyperFrames deterministic timeline construction. No user-controlled input or security vulnerability.

風險因素

⚡ 包含腳本 (1)
scripts/extract-audio-data.py:1-189
📁 檔案系統存取 (1)
scripts/extract-audio-data.py:181
⚙️ 外部命令 (1)
scripts/extract-audio-data.py:52
審計者: claude

品質評分

64
架構
100
可維護性
87
內容
50
社群
61
安全
91
規範符合性

你能建構什麼

為影片疊加層添加進場動畫

為影片創作中的文字疊加層和 UI 元素創建淡入、滑動或縮放進場動畫。

建立音訊反應式視覺化

建立能回應影片背景中音樂或語音的基於畫布的音訊視覺化。

序列複雜的多步驟動畫

使用 GSAP 時間軸、標籤和位置參數協調具有精確時間的多個動畫。

試試這些提示

基本補間動畫 
使用 GSAP 為 #hero 元素製作淡入並向上滑動 100px 的動畫。持續時間 0.6 秒，採用 power2.out 緩動。
時間軸序列 
建立 GSAP 時間軸：1) 淡入 .title，2) 0.2 秒後淡入 .subtitle，3) 在 0.5 秒時縮放進場 .button。使用位置參數，而非 delay。
打字機效果 
為 #message 創建打字機動畫，以每秒 10 個字元打字，游標閃爍。游標在閒置時應閃爍。
音訊視覺化畫面 
使用 AUDIO_DATA.frames[0].bands 陣列中的長條圖呈現音訊畫面 [FRAME]。每個頻帶對應一個畫布矩形。低頻控制縮放，高頻控制透明度。

最佳實務

  • 使用 transform 屬性（x、y、scale、rotation）而非版面配置屬性以啟用 GPU 加速
  • 將預設值傳遞給時間軸建構函式，而非使用 delay 鏈結以提高可讀性
  • 當需要以程式方式控制播放時，儲存補間和時間軸的傳回值

避免

  • 當 transform 可達到相同效果時，不要為 width、height、top 或 left 製作動畫
  • 當時間軸配合位置參數能更好地排序時，不要使用 delay 鏈結補間
  • 不要為尚不存在於 DOM 中的元素建立補間

常見問題

什麼是 GSAP？
GSAP（GreenSock Animation Platform）是一個用於高效能動畫的 JavaScript 函式庫。它提供 CSS 動畫無法比擬的時間、緩動和排序精確控制。
如何建立時間軸？
使用 gsap.timeline() 建立時間軸，然後使用 .to() 或 .from() 鏈結補間。補間預設按順序新增，或使用位置參數如 '<' 或 '+=0.5' 來重疊。
什麼是位置參數？
補間中的第三個參數控制其在時間軸中的放置位置。使用數字表示絕對時間，'+=0.5' 表示相對於結尾，'<' 表示與前一個同時開始，或使用標籤名稱。
打字機效果如何運作？
GSAP TextPlugin 逐字元為文字內容製作動畫。根據文字長度除以每秒字元數設定持續時間。使用類別變更分開管理游標狀態。
為什麼音訊資料使用同步 XHR？
HyperFrames 在頁面載入後同步讀取 window.__timelines。非同步資料載入表示在擷取開始時時間軸尚未就緒。這是專門為確定性影片渲染設計的。
extract-audio-data.py 支援哪些音訊格式？
腳本使用 ffmpeg 進行解碼，因此支援 ffmpeg 處理的任何音訊格式：MP3、WAV、AAC、OGG 以及包含音訊的影片檔案（MP4、WebM、MOV）。

開發者詳情

作者

heygen-com

授權

MIT

儲存庫

https://github.com/heygen-com/hyperframes/tree/main/skills/gsap/

引用

main

檔案結構

📁 references/

📄 effects.md

📁 scripts/

📄 extract-audio-data.py

📄 SKILL.md