GSAP学习的第二篇，关于staggers交错的。官方链接在这里
交错是用来控制不同元素动画的开始时间，一个简单的使用可以是这样的
gsap.to([".box", ".box1"], {
x: 400,
backgroundColor: "#00bae2",
duration: 5,
stagger: 1,
onComplete: function () {
console.log('动画结束')
console.log(this)
}
})
上面这段就相当于类名.box和.box1的元素都会执行这段动画，动画持续5秒，第二个元素.box1会在.box开始一秒后执行。
stagger的值也可以是一个负数，表示倒序去执行。例如上面改成负数的话就是box1元素先执行，开始一秒后box元素的动画开始。
复杂的stagger可以配置为一个对象，这个对象有一下的属性。
amount的值是一个数字，其计算过程相当于，假设有n个元素，每个元素之间的动画延迟就相当于(n-1)/amount。像上面amount如果是5的话，box1就会在box动画开始5秒后执行。如果有三个元素的话就是间隔2.5秒
each的值也是一个数字，定义了每个动画元素之间延迟。与amount的区别就是和动画元素数量无关。
grid属性用来表示当前动画元素的布局方式，可以设置为auto，也可以设置为[number, number] 表示几行几列。这是为了方便计算动画元素距离from起点元素的远近。
axis的值可以是“x”, "y", 或者不设置（undefined），他表示以x轴，y轴为准来计算邻近度。不设置的话就代表两边。
from表示动画要从哪一个元素开始，他的值可以是"start", "center", "edges", "random", "end"，中的一个。它们分别表示这组动画元素的第一位，中间，两边，随机一个和末位。除此之外如果使用了grid布局，from的值还可以是一个数组，例如 [0.5,0.5] 中心、 [1,0] 右上角等。from有一个原则是离开始元素越近，动画开始的越早。如果axis设置为x就代表以列为单位进行动画，设置y就是以行为单位进行动画。不设置就是以from定义元素为中心，向四周扩散。
除此之外还可以有repeat，yoyo参数，来精细化控制每一个动画元素的重复状态。onStart的回调函数在每一个动画元素执行时触发。
stagger还可以是一个函数，像下面这样
gsap.to('.box', { y: 100, stagger: function (index, target, list) { return index * 0.1; }});
这样是为了方便对每一个动画元素都执行不同的时间，所以他需要返回一个数字来表示延迟时间。
如果你的动画元素布局并不是一个规则的行列式的话，可以参考链接里的方法来精细化控制每一个元素的交错时间
