关于gsap官方是这样描述的：
GSAP👍🏼是前端业内非常有名的一个动效库，有大量的优秀的网站都在使用它。它不仅能在原生JS的环境下使用，也能配合各种当前流行的框架进行使用。
通过使用它，非常多原本实现起来很有难度的交互动画效果，都能快速高效的实现。
英文官方网站：https://gsap.com/docs/v3/
中文官方网站：https://gsap.framer.wiki/stated
简单的理解就是，使用这个库，可以创造出更丝滑，兼容性更强的网页页面交互动画。目前了解到这里就可以了。
什么是补间：通俗的讲，补间可以认为为元素添加的一条动画的声明。例如：
官方定义：像这样的单个动画称为“补间”，此补间表示将类为‘.box’的元素动画至 x 为 200px。
接下来我们来了解一下它的声明语法：
大致可以拆分为以上三块，一个补间就是由这三部分组成的。接下来我们极限来看一看方法都有什么？
补间共有四种类型，也就是方法，分别是gsap.to()、gsap.from()、gsap.fromTo()、gsap.set(),接下来就一个一个的进行讲解：
这个补间方法会将你定义的元素，从开始的位置，动画到你在方法中定义的位置。在动画的期间你可以设置元素的大小、颜色等状态。
示例展示：
导入gsap动画
设置动画方法
解读：
x：表示将元素向右移动200px
delay:表示这个方法会延迟1s执行，也就是这个动画会延迟一秒执行
rotation：表示在动画运动期间元素会旋转360度
导入gsap动画
设置动画方法
解读：
x：表示将元素向右移动200px
delay:表示这个方法会延迟1s执行，也就是这个动画会延迟一秒执行
rotation：表示在动画运动期间元素会旋转360度
最终效果就是，旋转着回到元素初始位置
这里的fill和svg中的含义是一样的，也就是填充色。
这个方法，和gsap.to()方法类似，不过这个方法是直接到达结束的状态，官方的解释就是，本质上就是零持续时间的gsap.to()方法。
以上就是补间的四种方法，接下来我们就来说一说目标。
官方介绍：
接下来，我们必须告诉 GSAP 我们想要制作什么动画。GSAP 在后台使用document.querySelectorAll()，因此对于 HTML 或 SVG 目标，我们可以使用选择器文本，如".class"和"#id"。或者您可以传入一个变量甚至一个数组。