gsap动画

缓动 tween

• gsap.to()，从起点移动到指定的位置

<div id="a">gsap.to</div>

gsap.to('#a',{
      x:700，//水平移动700px
      y:100，// 垂直移动100px
      duration:2,//动画持续2秒
      rotation:360,//旋转360度
      ease:"power2.out"//使用缓动函数
 })

• gsap.from()：从指定的位置移动到原点

gsap.from('#a',{
      x:100,//从x=100px的位置开始
      y:40,//从y=40px的位置开始
      duration:2,
      rotation:360,
      ease:"power2.out"
})

• gsap.fprmTo():从指定的位置开始移动

gsap.fromTo('#a',3,{x:200},{delay:2,x:700})//从x轴200的位置移动到x轴700的位置

时间线 timeline,(可以 将多个动画串联或并联起来，形成一个复杂的动画序列)

const t1= gsap.timeline()

t1.to(".box1",{x:100,duration:1})
t1.to(".box2",{y:100,duration:1},"-=0.5")
t1.to(".box3",{rotation:360,duration:1})