animation-gsap - 构建 GSAP 与 ScrollTrigger 网页动画
使用 GSAP 与 ScrollTrigger 创建时间线、补间、滚动效果、固定、擦动、视差及网页图形动画。
标签
更新于: 2026-10-03能力
典型输入
典型输出
该技能可以做什么
- 创建 GSAP 补间动画
- 编排动画时间线
- 配置滚动触发器
- 在滚动时固定元素
- 将动画与滚动同步
- 实现视差效果
- 制作 DOM 与 SVG 动画
- 制作 WebGL 与 Three.js 动画
- 将 GSAP 集成到 React
- 集成平滑滚动
输入
- 动画需求
- 滚动交互需求
- 目标 DOM 元素
- SVG、Canvas、WebGL 或 Three.js 对象
- React 组件结构
- 平滑滚动配置
输出
- GSAP 动画代码
- ScrollTrigger 配置
- 配置完成的网页动画
- React 动画集成代码
- 平滑滚动集成代码
要求
- JavaScript 运行环境
- GSAP 库
- ScrollTrigger 插件