使用 GSAP 打造丝滑的网页动画

GSAP（GreenSock Animation Platform）是目前最强大的 JavaScript 动画库之一。

为什么选择 GSAP

相比 CSS 动画和其他库，GSAP 有以下优势：

1. 性能卓越 — 经过高度优化，60fps 流畅运行
2. API 优雅 — 链式调用，时间线控制
3. ScrollTrigger — 强大的滚动驱动动画插件
4. 兼容性好 — 跨浏览器一致性

基本用法

import gsap from "gsap";

// 基础动画
gsap.to(".box", {
  x: 200,
  rotation: 360,
  duration: 1,
  ease: "power2.out"
});

// 时间线
const tl = gsap.timeline();
tl.from(".title", { opacity: 0, y: 50 })
  .from(".subtitle", { opacity: 0, y: 30 }, "-=0.3")
  .from(".button", { opacity: 0, scale: 0.8 }, "-=0.2");

ScrollTrigger

ScrollTrigger 让你可以根据滚动位置触发动画：

gsap.from(".card", {
  scrollTrigger: {
    trigger: ".card",
    start: "top 80%",
    end: "bottom 20%",
  },
  opacity: 0,
  y: 60,
  duration: 0.8,
  stagger: 0.15,
});

这就是为什么这个博客的动效如此丝滑的秘密！