介绍

GSAP是一个JavaScript库，用于构建可在每种主流浏览器中使用的高性能动画。CSS动画，SVG，画布，React，Vue，WebGL，颜色，字符串，运动路径，通用对象... JavaScript可以接触的任何东西！ScrollTrigger插件可让你以最少的代码创建令人叹为观止的基于滚动的动画,GSAP解决了无数浏览器不一致的问题。以下是一个官方简短的视频介绍：

Github

https://github.com/greensock/GSAP

特性

GSAP完全灵活；把它用在任何你想要的地方。零依赖性，有许多可选的插件和缓动功能，可轻松实现高级效果，例如沿运动路径进行变形，滚动或动画设置。(Mac下的几款gif截图变卦，暂时录不了gif)，效果直接看demo过瘾

• 创建丰富的SVG动画

DrawSVGPlugin（插件）允许你逐渐显示（或隐藏）SVG笔画，使其看起来像被绘制。MorphSVGPlugin（插件）可以平滑地将任何SVG形状变形为任何其他形状，而不管每个点的数量。MotionPathPlugin（插件）允许您轻松地沿路径移动任何对象。

• 增强沉浸式WebGL体验

GreenSock用于某些最受Three.js支持的WebGL项目。对场景中的任何对象进行动画处理。PixiPlugin使使用GSAP轻松设置Pixi.js对象动画变得轻而易举。利用GSAP的所有功能和控制以及Pixi.js的渲染速度，对位置，比例，颜色效果等进行动画处理。

• 控制Canvas动画

GSAP通过提供一种更轻松的外观和序列动画方式，使Canvas的动画制作更加轻松。GSAP通过GSAP的EaselJSPlugin与Adobe Animate和EaselJS协同工作。

安装使用

npm install gsap

默认的（主）文件是gsap.js，其中包含大多数易用性以及核心插件（如CSSPlugin，AttrPlugin，SnapPlugin，ModifiersPlugin）以及所有实用程序方法（如interpolate（），mapRange（）等）。

import gsap from "gsap";import Draggable from "gsap/Draggable";import ScrollTrigger from "gsap/ScrollTrigger";import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin); 

总结

用了GSAP之后才知道什么是丝滑的动画，说GSAP是专业级别的动画库一点也不为过，强烈推荐！