GSAP是什么？

GSAP 是一个强大的 JavaScript 工具集，可以将开发人员变成动画超级英雄。构建适用于所有主流浏览器的高性能动画。动画化 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象……任何 JavaScript 可以触及的东西！ GSAP 的 ScrollTrigger 插件可让您使用最少的代码创建令人惊叹的基于滚动的动画。

发觉国内人用的挺少的，国外人用的非常多，不知道是什么原因

GSAP官网： GSAP官网 Github仓库: GSAP的Github仓库

从基础开始讲起

GSAP其实用的最多的两个api就是 gsap.to 以及 gsap.from 下面介绍一下怎么使用，并且做出酷炫的动画

首先我们先引入cdn即可使用GSAP

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
gsap.to
gsap.to()里面有3个参数可以填写  第三个参数后面会讲
gsap.to()"你的目标target", { 你所要做出的动作}, "提前时间或滞后时间")
gsap.to其实就是将你所要操作的元素到你所指定的位置
<div class="box green"></div>
<div class="box purple"></div>
<div class="box blue"></div>
.box {
  height: 20px;
  width: 20px;
.green {
  background-color: green;
.purple {
  background-color: purple;
.blue {
  background-color: blue;
gsap.to(".green", { rotation: 360, x: 100, duration: 1 });
// 将.green的div旋转360° 并且位移100 动画时间为1s
// 若想要将所有的方块一起动的话只需要同时选择多个目标就行了
// gsap.to(".green, .purple", { rotation: 360, x: 100, duration: 1 }) 
// gsap.to(".box", { rotation: 360, x: 100, duration: 1 })
动画效果展示
gsap.from
gsap.from与to是大同小异的，to里面参数是指定目标到特定位置，from其实就是反过来罢了，给的参数是起始位置
gsap.from(".box", { rotation: 360, x: 100, duration: 1 })
// 将class为box的元素  从x=100的位置到之前css写的定义位置
下面看下动画是不是和to反过来
gsap.timeline !!非常重要
timeline无非就是一条时间线，你可以更好的去控制动画，尤其是复杂动画都会用到timeline，将他们串联起来，如果说你想让动画有个执行的先后顺序 那么就要用到timeline了(HTML CSS代码还是上面的代码没变)
我们下面实现一个想将三个box向右平移100同时将透明度调低之后，再进行360度旋转，是有一个先后顺序的
timeline参数需要填你使用动画的一些默认参数，不填也是可以的
// 先定义一条时间线
let tl = gsap.timeline({ duration: 1 };
// let tl = gsap.timeline({  };也是可以的
// 开始基于时间线做一些动画 结合上面的 gsap.to 和 gsap.from
tl.to(".box", { x: 100, opacity: 0.5 }).to(".box", { rotation: 360 });
//你也可以这么写 实现最后的效果是一样的不过写法会麻烦一点
tl.to(".box", { x: 100, opacity: 0.5 });
tl.to(".box", { rotation: 360 });
stagger参数
下面举的例子都会以timeline的方式写 如果看不懂的话可以看上面的教学
stagger参数是来控制如果多目标的时候，每个目标动画的时间差，这么说你可能有点听不懂，下面直接拿timeline的例子改写一下。
实现目标：每个box间隔0.2秒位移100（并不是同时位移） 并且执行旋转也是间隔0.3
let tl = gsap.timeline({ duration: 1 };
// let tl = gsap.timeline({  };也是可以的
// 开始基于时间线做一些动画 结合上面的 gsap.to 和 gsap.from
tl.to(".box", { x: 100, opacity: 0.5,stagger: .1 }).to(".box", { rotation: 360,stagger: .1 });
重复动画以及往返效果
repeat参数以及yoyo
repeat参数为重复次数  循环为-1
yoyo是布尔值  想要有往复效果则为true 默认为false
如果动画不止要做出一次 要做无限次或者说有个往复效果如何去做呢？
let tl = gsap.timeline({ duration: 1 };
tl.to(".green", { x: 100,repeat: -1, yoyo: true });
//将 .green的div旋转360° 并且位移100 动画时间为1s repeat为重复次数
这样我们想实现的动画就做出来了
控制动画的暂停、开始、回放
paused
你所要指定的动画可能不是一上来就自动执行的呢，而是通过手动触发的（像上面的菜单栏的例子） 如何去做呢
我们在timeline里面传参让这个动画上来不执行 我们通过按钮来触发
const bt = document.querySelector("button");
let tl = gsap.timeline({ paused: true }
tl.to(".green", { x: 100, opacity: 0.5,repeat: -1, yoyo: true })
bt.onclick = () => {
  tl.play();
timeline的控制播放、暂停、回放
通过timeline.play()、timeline.pause()、timeline.reverse()来控制
const play = document.querySelector("#play");
const pause = document.querySelector("#pause");
const reverse = document.querySelector("#reverse");
let tl = gsap.timeline({ paused: true }
tl.to(".green", { x: 100, opacity: 0.5, duration: 3 })
play.onclick = () => {
  tl.play();
pause.onclick = () => {
  tl.pause();
reverse.onclick = () => {
  tl.reverse();
下面为实现效果
学会上面这几种方法基本就可以写一个很酷炫的动画了！！
顺便附下上面几个demo的马上掘金地址：
code.juejin.cn/pen/7184030…
实现滚动触发动画
上面博客写的动画 通过滚动来触发动画，其实是依赖了gsap的一个插件 scrollTrigger
下面稍微粗略讲一下大致过程，其实用到的还是上面gsap.to和gsap.from
scrollTrigger官方文档：greensock.com/docs/v3/Plu…
官网实现的滚动动画在线仓库：
codepen.io/GreenSock/p…
gsap.to(".b", {
  x: 400,
  rotation: 360,
  scrollTrigger: { 
    trigger: ".b",  //触发元素
    start: "top center",  //开始动画的时机
    end: "top 100px", // 截止动画的时机
    scrub: true,  // 是否使用滚动以及回滚会回放动画
    markers: true, // 开启标注功能（更好看滚动开始以及截止的地方）
下面用个图片来讲解一下start 和 end的参数
第一个参数为元素的位置 第二个参数为视口的位置  当两者重合的时候即会开启动画
参数可以为百分比 或者top center bottom 都可以
带你们实现一个上面的文字特效
content作为容器， char为每个字符的css
我们将每个字符向上方移动150px，因为我们最终要做每个字符的掉落效果，通过gsap.to让每个字符间隔一定的秒数（前面讲过的stagger参数）将y坐标恢复为0  这其实就是整个的大致思路
  <div class="content">
    <div class="char">a</div>
    <div class="char">b</div>
    <div class="char">c</div>
    <div class="char">d</div>
    <div class="char">e</div>
    <div class="char">f</div>
    <div class="char">g</div>
    <div class="char">h</div>
    <div class="char">i</div>
    <div class="char">j</div>
.content {
  font-size: 5rem;
  position: relative;
  color: white;
.char {
  display: inline-block;
  margin-right: 6px;
  opacity: 0.3;
  transform: translateY(-150px);
  transition: transform .3s ease-in-out;
我们将上面的代码渲染出来是下面这个结果
我们如何将content上方的文字看不见呢？
这里就巧妙的利用到奇妙的css的clip-path将div按照路径进行一个显示
也就是直接给出一个上方蓝色方框的路径 那么div上面的文字就不会显示了
这里推荐一个可以编辑的clip-path可视化网站：bennettfeely.com/clippy/
下面我们更改下css代码，加入clip-path参数，就可以发现content上方的char文字都看不见了
.content {
  font-size: 5rem;
  position: relative;
  color: white;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
接下来大家估计都会了吧，通过gsap.to让每个字符y置为0，并且间隔一段时间掉落即可，这样就完成这个动画了
const t = gsap.timeline({});
t.to(".char", {
  opacity: 1,
  delay: .1,
  duration: .5,
  y: 0,
  ease: "Power4.inOut",
  stagger: 0.1,
最终的动画效果:
好了，这篇文章到这里就结束了。在这篇文章里我讲述了一些如何用gsap做出一些炫酷动画。
喜欢的可以点个赞，有问题可以在评论区里面问题~