GSAP

GreenSock Animation Platform (GSAP) 是业界最强大、最灵活的JavaScript动画库。它为现代web开发提供了高性能的动画解决方案，支持所有主流浏览器。

⏱️

Timeline 时间轴

创建复杂的动画序列，精确控制时间和顺序

📜

ScrollTrigger 滚动触发

基于滚动位置触发动画，创造沉浸式体验

🎭

Morphing 形变

平滑的形状变换和路径动画

⚡

Physics 物理效果

真实的物理动画，如弹性、惯性等

🎮 互动演示

Timeline动画

ScrollTrigger

滚动页面查看效果

形状变换

✨ 核心优势

⚡

极致性能

比CSS动画快20倍，硬件加速优化

🎯

精确控制

亚像素级精度，完美的时间控制

🔧

易于使用

直观的API，丰富的文档和社区支持

💻 快速开始

// 基础动画
gsap.to(".element", {
  duration: 2,
  x: 100,
  rotation: 360,
  ease: "elastic.out(1, 0.3)"
})

// Timeline动画序列
const tl = gsap.timeline()
tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 100, duration: 1 }, "-=0.5")
  .to(".box3", { rotation: 360, duration: 1 })

// ScrollTrigger滚动动画
gsap.to(".scroll-element", {
  scrollTrigger: {
    trigger: ".scroll-element",
    start: "top 80%",
    end: "bottom 20%",
    scrub: true
  },
  x: 400,
  rotation: 360
})