大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 GSAP

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web.

GSAP 是一个与框架无关的灵活、零依赖 JavaScript 动画库，可将开发人员变成动画超级英雄，适用于构建所有主流浏览器的高性能动画，包括： CSS、SVG、Canvas、React、Vue、WebGL、颜色、字符串、运动路径、通用对象等等。同时，GSAP 的 ScrollTrigger 插件实现了以最少的代码提供令人惊叹的滚动动画，而且 gsap.matchMedia() 使构建响应迅速、易于访问的动画变得非常容易。

GSAP 提供了先进的排序、可靠性和严格的动画控制，同时解决了超 1200 万个网站上的实际问题，比如：浏览器不一致。从本质上讲，GSAP 是一个高速属性操纵器，可以随时间以极高的精度更新值，比 jQuery 快 20 倍！

GSAP 提供了诸多可选插件和缓动函数可轻松实现高级效果，例如：滚动、变形、沿运动路径动画或翻转动画。甚至还有一个方便的观察器，用于跨浏览器、设备规范事件检测。

目前 GSAP 在 Github 通过 MIT 协议开源，有超过 19k 的 star、2k 的 fork、176k 的项目依赖量、是一个妥妥的前端优质开源项目。

如何使用 GSAP

首先需要安装依赖，可以通过 npm 包管理器也可以通过 CDN 直接引用：

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

GSAP 的核心可以对几乎所有内容进行动画处理，包括： CSS 和属性，此外还包括所有实用方法，例如： interpolate()、mapRange()、大多数 eases 方法，并且它可以执行捕捉和修改。

import gsap from "gsap";
// 导入依赖并获取插件
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";
// 或从 “all” 文件导出所有工具，不包括仅限会员的插件
import {gsap, ScrollTrigger, Draggable, MotionPathPlugin} from "gsap/all";
// 注册插件
gsap.registerPlugin(ScrollTrigger, Draggable, Flip, MotionPathPlugin);

如果要寻找滚动驱动的动画，可以使用 GSA?P 的 ScrollTrigger 插件，同时还配套了一个 ScrollSmoother。

ScrollTrigger 使任何开发者都可以用最少的代码创建令人惊叹的基于滚动的动画，支持：无限灵活、拖动、固定、捕捉或只是触发任何与滚动相关的内容，即使它与动画无关。

gsap.registerPlugin(ScrollTrigger)
gsap.to('.box', {
    scrollTrigger: '.box', // start animation when ".box" enters the viewport
    x: 500
});

如果要在 React 项目中使用 GSAP，可以通过 @gsap/react 包提供的 useGSAP() Hooks，其是 useEffect()/useLayoutEffect() 的直接替代品，可以自动执行清理任务。

import {useRef} from "react";
import gsap from "gsap";
import {useGSAP} from "@gsap/react";
const container = useRef();
useGSAP(() => {
    // gsap 代码
}, {scope: container});
 // <-- scope is for selector text (optional)

当然，开发者还可以像使用普通 Hooks 一样使用 dependencies 依赖数组：

useGSAP(() => {
    // gsap code here...
}, {dependencies: [endX], scope: container});
// config object offers maximum flexibility

更多关于 GSAP 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/greensock/GSAP

https://www.npmjs.com/package/@gsap/react