gsap

万人都要将火熄灭，我一人独将此火高高举起。——海子

https://github.com/greensock/GSAP

https://gsap.com/

GSAP 是一个与框架无关的JavaScript 动画库，可将开发人员变成动画超级英雄。构建适用于所有主要浏览器的高性能动画。动画 CSS、SVG、canvas、React、Vue、WebGL、颜色、字符串、运动路径、通用对象…任何 JavaScript 可以触及的内容！ GSAP 的ScrollTrigger插件以最少的代码提供令人惊叹的基于滚动的动画。 gsap.matchMedia()使构建响应式、易于访问的动画变得轻而易举。

没有其他库能够提供如此先进的测序、可靠性和严格的控制，同时解决超过 1200 万个站点的实际问题。 GSAP 解决了无数浏览器不一致的问题；你的动画就可以了。从本质上讲，GSAP 是一个高速属性操纵器，可以随着时间的推移以极高的精度更新值。它比 jQuery 快 20 倍！

GSAP 完全灵活；把它撒在你想要的地方。零依赖。

有许多可选插件和缓动功能可以轻松实现高级效果，例如滚动、变形、沿运动路径制作动画或翻转动画。甚至还有一个方便的观察者来规范跨浏览器/设备的事件检测。

CDN：

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

安装：

npm install gsap

例如：

import { gsap } from "gsap";
    
import { ScrollTrigger } from "gsap/ScrollTrigger";


gsap.registerPlugin(ScrollTrigger);

使用：

gsap.to(".box", {
  x: 500,
  scrollTrigger: {
    trigger: ".box",  // 触发器元素
    start: "top 80%", // 开始触发的滚动位置
    end: "top 30%",   // 结束触发的滚动位置
    scrub: 1,         // 动画随滚动条同步（值越大同步越平滑）
    markers: true,    // 显示标记，用于调试
    pin: true         // 固定触发器元素
  }
});