网页动画效果实现0.1

使用GSAP实现网站动画效果

GSAP是一个流行的 JavaScript 动画库，它可以用来创建各种动画效果，包括文字动画。GSAP 提供了丰富的功能，可以轻松地实现各种复杂的动画效果，同时也提供了高性能的动画执行。
官网https://greensock.com/
官网文档https://greensock.com/docs/v3/GSAP
使用的关于GSAP的插件https://greensock.com/docs/v3/Plugins/ScrollTrigger
ScrollTrigger 是 GSAP 库的一个插件，它用于在滚动页面时触发动画效果。通过 ScrollTrigger，你可以根据页面滚动的位置来控制元素的动画行为，比如元素的进入、退出、滚动时的动画效果等。
**

首先介绍3个基本的动画方法

**

gsap.to()这个执行的动画，在动画的过程中，由初始的位置运动到目标的位置，结束的时候保持在，你动画设置的目标位置。简单的理解就是到哪
gsap.from()这个执行的动画，在动画的过程中，由目标位置运动到初始的位置，结束的时候保持在，初始的位置。简单的理解就是从哪里来
gsap.fromTo()这个执行的动画，在动画的过程中，由初始位置到达目标位置，结束的时候保持在，目标的位置。
简单的理解就是从哪来到哪去

举列说明
let tween = gsap.to(".class", {rotation: 360, duration: 5, ease: "elastic"});
tween这个就是gsap.to方法的返回值，
gsap.to再看这里面的参数，.class，获取到要添加动画的元素，再看第二个参数，是个对象，大概就是一些动画的配置
rotation：旋转360度
duration：持续时间五秒
ease：动画的缓动函数，控制动画的加速和减速效果。可以是预定义的缓动函数，如 'power3.out'，也可以是自定义的缓动函数。这个之后说明一下

tween.pause();
tween.seek(2);
tween.progress(0.5);
tween.play(); 
通过返回值去调用一些方法，等等
上面的方法解释
tween.pause();
这一行代码将 Tween 动画暂停，使其停留在当前位置。动画将保持在暂停状态，直到被继续播放。

tween.seek(2);
这一行代码将动画的播放头移到指定的时间点（秒数）。tween.seek(2) 表示将动画的播放头移动到 2 秒的位置。

tween.progress(0.5);
这一行代码设置动画的进度。tween.progress(0.5) 表示将动画的进度设置为 0.5，即动画的中间位置。

tween.play();
这一行代码将动画继续播放，从当前位置继续到动画结束。如果动画之前被暂停，现在会继续播放。

在介绍一个东西
Timeline
它是最终的时间序列工具，可以让你在任意时间位置放置动画，简单理解就是将动画排序一下哇
创建
var tl = gsap.timeline();
往时间线里面添加动画
tl.to(".box", {duration: 2, x: 100, opacity: 0.5});
可以这种写法
tl.to(".box1", {duration: 2, x: 100}) //notice that there's no semicolon!
  .to(".box2", {duration: 1, y: 200})
  .to(".box3", {duration: 3, rotation: 360});
或者是这样添加动画
 timeline.add()
总的来说就是在一根时间线上面去控制动画的执行顺序

结合这个插件来搞一下，ScrollTrigger 是 GSAP 库的一个插件
搞一个简单的列子
gsap.to(".box", {
  scrollTrigger: ".box", // 开始动画当.box进入可视窗口的时候一次
  x: 500
});
搞个复杂的列子
let tl = gsap.timeline({
  // 是的，我们可以将ScrollTrigger添加到整个时间轴中！
  scrollTrigger: {
    trigger: ".container",
    pin: true,   // 在激活时固定触发元素
    start: "top top", // 当触发元素的顶部与视口顶部对齐时
    end: "+=500", // 在开始后滚动500px后结束
    scrub: 1, // 平滑切换，需要1秒“赶上”滚动条
    snap: {
      snapTo: "labels", // 对齐时间轴中最近的标签位置
      duration: {min: 0.2, max: 3}, // 对齐动画至少需要0.2秒，但不超过3秒（由速度决定）
      delay: 0.2, // 在最后一次滚动事件后等待0.2秒再进行对齐
      ease: "power1.inOut" // 对齐动画的缓动效果（默认为“power3”）
    }
  }
});

// 添加动画和标签到时间轴中
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation: 45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");