GSAP 一款为专业人士打造的及其强大的JavaScript 动画库，其流程程度堪称一绝，无论是制作UI、SVG动画还是创建身临其境的WebGL，GSAP都会为您提供支持，当然我使用的就是最基本的功能，例如页面滚动带来的动画效果。
为什么选择GSAP
最近接手一个网站，要实现的动画比较多，那么我在调研的过程中发现，GSAP有以下优点：
- 作为老牌框架，兼容性很好，且官方在持续更新
- 使用上不局限于框架，甚至直接在原生js中就能使用，而诸如：
framer-motion,react spring等只能用于react框架 - 易于上手，核心理念是以时间轴(Timeline) 为纬度的补间动画(Tween)还有各种强大的插件，如：ScrollTRigger
- 在 react框架中更是提供了简便的API、如：动画清理
useGSAP
补间动画 (Tween)
补间是所有动画的工作 - 可以把它想象成一个高性能的属性设置器。输入目标（要进行动画处理的对象）、持续时间以及希望其动画化的任何属性，然后当补间的播放头移动到新位置时，确定此时属性值应是什么，相应地应用它们
常用创建补间动画的方法
gsap.to()
gsap.from()
gsap.fromTo()用法很简单，如下 demo：
gsap.to('.box', { rotation: 27, x: 100, duration: 1 })时间线 (Timeline)
让补间动画可以排序，可让动画及时放置在任何想要的位置，然后使用 pause（）、play（）、progress（）、reverse（）、timeScale（） 等方法轻松控制整个序列
PLAYHEAD
|--------------timeline-----|-----------|
|--tween1--| |
|-----tween2-----|-----------|可以用 addLabel 标记时间线的点，通过第二个参数来做对应动画
tl.addLabel("step2", 3)
.to(..., "step2")
.to(..., "step2+=0.75")控制补间和时间线
var tween = gsap.to(...);
var tl = gsap.timeline();
tl.to(...).to(...);
tween.pause();
tween.timeScale(2);
tl.seek(3);
tl.progress(0.5);
...动画曲线
可视化动画曲线 gsap.com/docs/v3/Eas…
社区强大
GSAP的社区很多成品，如果你对自己的动画无从下手，没有灵感，就去看看别人实现的酷炫效果，加入到你的网站中，那会是非常棒的体验，我相信社区的作用也在于此。
简单案例使用
以下是页面进入动画：一个封装起来的动画渐入效果
import { gsap } from 'gsap/gsap-core'
import { useGSAP } from '@gsap/react'
export const useFadeIn = ({
target,
item
}: {
target: string,
item: string
}) => {
useGSAP(() => {
gsap
.timeline({
scrollTrigger: {
trigger: target,
start: '0% 80%',
end: '0% 80%',
toggleActions: 'play none reverse none'
}
})
.from(item, {
y: 300,
opacity: 0
})
})
}小试牛刀：
先拿到元素
const box = document.getElementById('box');① TweenLite.to()方法让元素移动
TweenLite.to(box, 0.7, {left: 0});
//支持第二个元素
//可以通过定义元素的X来更正元素位置
TweenLite.to(box, 0.7, {left: 0, x: 0});② TweenLite.from方法
TweenLite.from(box, 2, {x: '+=200px', autoAlpha: 0});用来使元素从定义在.from()方法里的位置运动到在CSS中定义的位置
会看到元素从元素左边200px的位置运动到元素在CSS中定义的位置。
- autoAlpha方法是GSAP中一个特别的属性，它把opacity和visibility两个属性合二为一了
- autoAlpha: 0表示它会把元素初始化为opacity:0;visibility:hidden。当执行动画效果的时候它会把visibility的值设置为inherit以及opacity值设置为1。从而产生一个渐现的效果
③TweenLite.set()
当我们想设置元素的一些CSS属性需要动画效果时候，比如，重设元素的位置
TweenLite.set($box, {x: '-=200px', scale: 0.3});
TweenLite.set($box, {x: '+=100px', scale: 0.6, delay: 1});
TweenLite.set($box, {x: '-50%', scale: 1, delay: 2});元素会从-200px 的位置开始执行以下的两步：放大和向右位移到x 为 -50% 的位置
元素只是单纯的在改变属性并没有动画效果。
delay这个属性来制定元素属性改变的延迟时间
④TweenLite.fromTo()方法
这个方法我们可以定义元素的起始位置
TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 300});
定义元素从左边200px的位置开始运动到指定的位置。
x:300会覆盖在CSS中定义的transform: translate(–50%, –50%)的样式
用新的transform: matrix(1, 0, 0, 1, 300, -50);样式来代替。
⑤GreenSock提供了各种的运动曲线
- 依靠的是缓动曲线函数
TweenMax的话，它已经包含了EasePack
EasePack包含下面的这些运动曲线：
1、Back 2、SlowMo 3、StppedEase 4、RoughEase 5、Bounce 6、Circ 7、Elastic 8、Expo 9、Sine
- 简单使用
TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease:Power4.easeInOut});下面来添加ease:Power4.easeInOut来看看实际的效果
TweenLite.to($box, 0.4, {top: '100px', y: '-100%', ease:Bounce.easeOut, delay: 2});
TweenLite.to($box, 0.7, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 3});
TweenLite.to($box, 0.8, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 4.2});
TweenLite.to($box, 2.5, {top: '50%', y: '-50%', ease:Power0.easeNone, delay: 5});
TweenLite.to($box, 2.5, {x: '+=400px', ease:Elastic.easeInOut, delay: 7.7});
TweenLite.to($box, 2.5, {x: '-=400px', rotation: -720, ease: SlowMo.ease.config(0.1, 0.7, false), delay: 10.4});曲线函数地址：greensock.com/ease-visual…
⑥ 回调函数
GreenSock提供了丰富的回调函数来操作动画效果。
以.fromTo()方法为例
比如，我们想要在动画开始的时候触发回调函数。可以创建一个start的函数：
- 分别在不同的状态的时候触发对应的回调函数
onStart:start在动画开始的时候来触发回调函数
onUpdate会在动画的每一帧触发
onComplete会在动画结束的时候触发。
function start(){
console.log('start');
}
function update(){
console.log('animating');
}
function complete(){
console.log('end');
}
TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease:Power4.easeInOut, onStart: start,onUpdate:update,onCo小结
GSAP 的强大不是一篇能阐述完的，感兴趣的朋友可以自行查看官网文档，不用造轮子，我们都是轮子的使用者。respect
