用途:GSAP 用于为网页创建专业级动画,适合复杂动画、滚动触发效果、时间线编排与平滑过渡。资料称其在被 Webflow 收购后 100% 免费,包含所有插件。
主要能力:核心补间方法包括 gsap.to()、gsap.from()、gsap.fromTo() 和 gsap.set();可用 gsap.timeline() 编排序列,并通过位置参数控制重叠与延迟。支持 stagger 交错动画与多种缓动(如 power2.out、elastic.out、bounce.out)。插件生态包括 ScrollTrigger(滚动动画、scrub、pin、snap)、Flip、Draggable、MotionPathPlugin、TextPlugin、SplitText、MorphSVGPlugin、DrawSVGPlugin、ScrollSmoother 等,使用前需 gsap.registerPlugin() 注册。性能方面建议动画化 transform 与 opacity,避免 width、height、top、left 等触发重排的属性,并可用 gsap.quickTo() 处理高频更新值。
使用方式:安装命令为 npm install gsap;React 可配合 npm install @gsap/react 使用 useGSAP 钩子实现自动清理与作用域限制。常见模式包括滚动淡入、水平滚动分区、SplitText 文字逐字显现等。
适用场景:需要精细时间线控制、滚动驱动效果或批量元素动画的前端项目。
限制:资料未提供浏览器兼容范围、包体积、服务端渲染细节;makers 调试标记应仅用于开发环境;具体 API 行为以官方文档为准。