gsap
创建专业级 GSAP 视频动画
为视频合成编写 GSAP 动画需要精确的时序控制和确定性执行。本技能提供全面的 GSAP 文档和可直接使用的 HyperFrames 特效，让你无需翻阅多个资源即可创建流畅、专业的动画。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“gsap”。 Animate .card elements with a stagger effect, 0.1s delay between each card, sliding in from the left
预期结果:
gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});
正在使用“gsap”。 Build a timeline where .logo fades in first, then .headline slides up, then .subtitle fades in after headline completes
预期结果:
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”。 Type 'Welcome' at 12 characters per second with cursor '|' that blinks between solid and blinking states
预期结果:
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);
安全审计
低风险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.
高风险问题 (2)
中风险问题 (1)
低风险问题 (2)
风险因素
⚡ 包含脚本 (1)
📁 文件系统访问 (1)
⚙️ 外部命令 (1)
质量评分
你能构建什么
为视频叠加层添加入场动画
为视频合成中的文字叠加层和 UI 元素创建淡入、滑入或缩放入场动画。
构建音频响应式可视化器
创建基于画布的音频可视化器，能够响应视频背景中的音乐或语音。
编排复杂的多步骤动画
使用 GSAP 时间线、标签和位置参数协调多个动画，实现精确的时序控制。
试试这些提示
Use GSAP to animate #hero element fading in and sliding up 100px. Duration 0.6s with power2.out easing.
Create a GSAP timeline that: 1) fades in .title, 2) fades in .subtitle 0.2s after, 3) scales in .button at 0.5s. Use position parameters, not delay.
Create a typewriter animation for #message that types at 10 characters per second with a blinking cursor. Cursor should blink when idle.
Render audio frame [FRAME] with bars using AUDIO_DATA.frames[0].bands array. Each band maps to a canvas rectangle. Bass drives scale, treble drives opacity.
最佳实践
- 使用 transform 属性（x、y、scale、rotation）而非布局属性，以启用 GPU 加速
- 将默认值传递给时间线构造函数，而非通过 delay 链式调用，以提高可读性
- 需要通过编程方式控制回放时，存储补间和时间线的返回值
避免
- 当使用 transform 可以达到相同效果时，不要动画化 width、height、top 或 left
- 当时间线配合位置参数可以更好地排序序列时，不要使用 delay 链式调用补间
- 不要为尚未存在于 DOM 中的元素创建补间
常见问题
什么是 GSAP？
如何创建时间线？
什么是位置参数？
打字机效果是如何工作的？
为什么使用同步 XHR 获取音频数据？
extract-audio-data.py 支持哪些音频格式？
开发者详情
文件结构