gsap-scrolltrigger - 创建 GSAP 与 ScrollTrigger 网页动画
使用 GSAP 和 ScrollTrigger 创建时间轴、滚动、固定、视差以及 DOM 或图形元素动画。
标签
更新于: 2026-10-03能力
典型输入
典型输出
该技能可以做什么
- 创建 GSAP 补间动画
- 使用时间轴编排动画
- 配置滚动触发动画
- 在滚动期间固定元素
- 将动画与滚动同步
- 构建视差效果
- 为 Three.js 场景制作动画
- 集成 React
- 集成平滑滚动
- 批量处理并交错显示元素
输入
- 动画目标
- 滚动位置
- 时间轴时序
- ScrollTrigger 配置
- React 引用和组件
- Three.js 对象
- 平滑滚动容器
输出
- GSAP 动画代码
- 滚动驱动交互
- 固定和横向滚动区段
- 编排后的动画时间轴
- 视差效果
- 已制作动画的 Three.js 属性
要求
- JavaScript 运行环境
- GSAP 库
- ScrollTrigger 插件
- 浏览器 DOM 和滚动环境
- React 集成所需的 React 和 @gsap/react
- Three.js 集成所需的 Three.js
- Locomotive Scroll 集成所需的 Locomotive Scroll