时至今日在Web中开发动效有很多种方式，有纯CSS的方式（Animations和Transitions），也有Web Animation API和SVG Animation，还有很多优秀的JavaScript库（比如，Anime.js、KUTE.js、Mo.js等）。在WebGL方面有Three.js、PixiJS、Babylon.js和PlayCanvas等。除此之外，业内还有一个制作动画非常出色的平台，那就是GSAP（GreenSock Animation Platform的简称）。在接下来的日子中，将会不间断的发布一些关于GSAP制作动效相关的教程，今天这篇文章，主要和大家先探讨一些GSAP的基础知识。

W3cplus小站上关于Web动画相关的教程有很多，如果你对动画其他方面的知识感兴趣的话，可以猛击这里进行了解。

GSAP是什么？

GSAP是GreenSock提供的一个制作动画的成熟的JavaScript库，该库源于Flash的动画。这也意味着GreenSock背后的人对Web动画了如指掌，这个库已经存在很长的时间了，而且不会很快消失。

GSAP中有很多工具和插件，我们可以利用它们来快速开发Web动画和快速处理开发Web动画遇到的任何挑战。除了GSAP具有强大的特性、工具和插件之外，而且学习曲线也相对较浅，因为它在所有不同的实现和插件中使用了直观且一致的语法。此外，GSAP论坛还提供了很棒的文档、教程等。

为什么选择GSAP？

文章开头就提到过，在Web中构建中动画效果有很多种方式，也有很多优秀的库或工具，那么为什么要选择GSAP呢？那是因为，GSAP有着下面几个明显的特征：

• 速度快： GSAP专门优化了动画性能，使用实现和CSS一样的高性能动效
• 轻量和模块化： 模块化与插件式的结构保持了GSAP核心引擎的轻量，TweenLite包非常的小。GSAP还提供了 TweenLite、 TimelineLite、 TimelineMax、 TweenMax等功能动画模块，在使用的时候可以按需加载
• 没有依赖： 使用GSAP开发动效时不需要依赖于任何第三方库或插件
• 灵活控制： 不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动效
• 任何对象都可以实现动画，只要能运行JavaScript脚本的地方就可以使用GSAP

GSAP也非常的灵活，可以适用于你给它的任何东西。也就是，GSAP可以让下面这些东东都动起来：

• CSS： CSS中的2D和3D方面的transform、color、width、opacity、border-radius、margin等，几乎所有的CSS属性都可以
• SVG： SVG中的一些属性，比如viewBox、width、height、fill、stroke、cx、r、opacity等，而且借助像 MorphSVG 和 DrawSVG这样的GSAP插件，还可以实现一些高级的效果
• 任何数值，比如<canvas>的对象，3D动画场景中的摄像机位置和滤镜值

一旦你学习了GSAP相关的基本语法，就能够在任何可运行JavaScript脚本的地方使用GSAP。如果你也比较关注DOM元素的CSS属性的动画，在使用GSAP时，还可以在React、Vue等前端框架中使用。

GSAP核心模块

GSAP有几大核心模块，它们是：

• TweenLite：GSAP的基础，一个轻量级和快速的HTML5动画库
• TweenMax：TweenLite的扩展，除了包括TweenLite本身之外，还包括TimelineLite、TimelineMax、CSSPlugin、AttrPlugin、RoundPropsPlugin、DirectionalRotationPlugin、BezierPlugin和EasePack
• TimelineLite：一种轻量级的Timeline，用于控制多个Tween和（或）其他Timeline
• TimelineMax：一个增强版的TimelineLite，它提供了额外的、非必要的功能，如repeat、repeatDelay和yoyo等等

在实际使用的时候，如果你所需要的功能不是过强，可以直接使用GSAP自己内置的API（TweenLite），但如果你所需要的功能过强的话，可以根据自己的需要加载相应的功能模块。在后面介绍GSAP使用的时候，我们会详细介绍这方面。

值得注意的是，GSAP除了提供上述所列的功能模块之外，还提供了一些额外的功能（也有付费的额外功能），比如使用 DrawSVGPlugin创建线条绘制的动画效果，MorphSVHPlugin可以将一个SVG形状变形为另一个，以及其他功能。

GSAP如何工作？

接下来，我们来通过真实的实例来向大家阐述GSAP是如何工作的。

加载GSAP

如果你要使用GSAP来制作Web动画，那么首先要加载GSAP。加载GSAP的方法有很多种，其中最简单的就是加载一个CDN的地址：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>

如果你还需要一些其他的功能，还可以点击这里，在CDN选项中选择自己所需要的功能模块：

这个时候会多加载相应功能模块或插件的JavaScript脚本文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/CSSRulePlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/EaselPlugin.min.js"></script>

这种方式和其他制作动画效果的JavaScript库相似。这样一来，就可以在你的页面中使用GSAP来开发动效了。

如果你是使用像React或Vue这样的前端框架来开发Web应用或Web页面的话，可以使用NPM或Yarn来安装：

npm install gsap

安装完gsap之后，也可以在这里的“Modules/NPM”选项中选择所需要的插件和功能模块：

然后将对应的代码复制到要使用GSAP的页面或组件中：