gsap对象是这个动画库引擎一切操作的切入点：
它可以用来设置动画；设置信息；注册插件、时间函数、效果；全局控制所有动画。
gsap.to( ".btn", { x:100, y:50, duration:1 } )
第一个参数：被设置动画的目标
可以用字符串表示选择器，可以传入jQuery对象，js对象等。
(GSAP uses document.querySelectorAll() internally) or it can be direct references to elements, generic objects, or even an array of objects.
第二个参数：被安排的动画详情对象
gsap通过改变元素的inline style而产生动画。因此CSS transform、opacity动画性能会更好：
x，y，rotation，rotationX，rotationY，scale，scaleX，scaleY，skewX，skewY
还可以用xPercent，yPercent，方便的按比例设置位移。
其他的数值型属性值也可以用来设置动画：
width，height，color，padding，left，top，backgroundColor，bordeRadius（使用驼峰型字符串表示css属性名）……
查看更多可设置的内容
https://greensock.com/docs/v3/GSAP/gsap.to()
gsap.defaults({
ease: "power2.in",
duration: 1
});gsap.from( "xxx", { } )
与gsap.to( )类似，不过动画是由设置值变化至初始值。
gsap.fromTo( "xxx", { 指定初始值 }，{ 指定终止值, 及其他设置 } )
初始值中设置的属性，如果终止值中没有再设置，则默认该属性不变。
初始值中没有设置，终止值中出现的属性，默认初始状态该属性的值为元素本身的状态。
delay属性
设置动画开始前等待的秒数。默认为0
repeat属性
设置动画重复播放的次数。默认为0,不重复播放。可以设置为-1，无限循环
yoyo属性
设置为true的话，奇数次重复播放的时候会反向进行，造成反复往返的效果
repeatDelay
重复播放之间的等待秒数
ease属性
ease的属性值应该是一个字符串，放置在一对引号中: "bounce"。
默认时间函数会运用到出场（out），例如上面的设置，会在动画结束处展示回弹效果。
可以设置"bounce.in"，从而将回弹效果运用在动画开始处。
可以设置"bounce.inOut"，将效果同时运用在开始和结尾。
有些时间函数可以设置参数，从而产生效果的强度变化："back.config(5)"。
GreenSock Ease Visualizer
https://greensock.com/docs/v3/Eases
stagger属性
如果一个tween设置了多个元素，默认情况下这些元素将一起开始动画。同个添加stagger属性，可以让这些元素依次执行动画。最简单的设置方式，stagger: .2 表示每个元素动画开始的时间相差0.2s。
stagger还可以进行更多的设置：
stagger: { each: .2 } // 这与直接设置stagger: .2 是一个意思
stagger: { amount: .2 } // 指示所有元素的动画在0.2s之内开始
stagger: { from: "end" } // 指示动画从最后一个元素开始
// from 属性值还可以设置为："edges","center"等paused属性
默认情况下一个tween会自动开始播放。可以通过添加一个paused: true 属性，禁止其自动播放。
播放控制
var tween = gsap.to("xxx",{ ..., paused:true } );
document.getElementById("play").onclick = ()=> tween.play();
document.getElementById("pause").onclick = ()=> tween.pause();
document.getElementById("reverse").onclick = ()=> tween.reverse();
document.getElementById("restart").onclick = ()=> tween.restart();gsap.set( "xxx", { ... } )
设置某元素一个状态，立即生效。可以理解为设置一个没有duration的tween。