核心特性
GSAP 的设计哲学和关键技术特性
高性能动画
基于requestAnimationFrame，优化动画性能。支持硬件加速，60fps流畅动画。
丰富的API
提供Timeline、Tween、Stagger等高级动画API。支持复杂的动画序列和编排。
跨浏览器兼容
支持所有主流浏览器，包括IE6+。自动处理浏览器差异，无需额外配置。
轻量级
核心库仅30KB，压缩后更小。按需加载插件，优化包体积。
生态系统
围绕 GSAP 构建的完整工具链
框架集成
与React、Vue、Angular等框架完美集成。提供useGSAP等Hook，简化动画开发。
ScrollTrigger
滚动触发动画插件。基于滚动位置触发动画，创建滚动驱动的交互效果。
MotionPath
运动路径插件。沿SVG路径或自定义路径运动，创建复杂的运动轨迹。
MorphSVG
SVG变形插件。实现SVG形状之间的平滑变形动画。
TextPlugin
文本动画插件。支持打字机效果、文本逐字显示等文本动画。
Flip
FLIP动画插件。实现布局变化的平滑过渡动画，优化性能。
快速入门
# 安装GSAP
npm install gsap
# 基本使用
import gsap from "gsap";
// 简单动画
gsap.to(".box", {
x: 200,
rotation: 360,
duration: 1,
ease: "power2.out"
});
// 时间线动画
const tl = gsap.timeline();
tl.to(".box1", { x: 200, duration: 1 })
.to(".box2", { x: 200, duration: 1 }, "-=0.5")
.to(".box3", { x: 200, duration: 1 }, "-=0.5");
// 滚动触发动画
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
scrollTrigger: ".box",
x: 500,
rotation: 360,
duration: 3
});配置示例
// GSAP配置示例
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
// 注册插件
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
// 全局配置
gsap.config({
nullTargetWarn: false,
trialWarn: false
});
// 默认缓动函数
gsap.defaults({
ease: "power2.out",
duration: 1
});
// 响应式动画
ScrollTrigger.matchMedia({
// 桌面端
"(min-width: 768px)": function() {
gsap.to(".box", {
x: 200,
scrollTrigger: ".box"
});
},
// 移动端
"(max-width: 767px)": function() {
gsap.to(".box", {
x: 100,
scrollTrigger: ".box"
});
}
});
// 清理动画
const animation = gsap.to(".box", { x: 200 });
animation.kill(); // 停止动画
animation.pause(); // 暂停动画
animation.resume(); // 恢复动画
animation.restart(); // 重新开始动画学习资源
与其他动画库对比
vs Framer Motion
GSAP功能更强大，适合复杂动画。Framer Motion更简单，适合React组件动画。
vs Anime.js
GSAP性能更好，功能更丰富。Anime.js更轻量，适合简单动画场景。
vs CSS动画
GSAP控制更精细，支持复杂编排。CSS动画性能更好，适合简单过渡效果。