【vue3】GSAP在vue中的使用

一、获取GSAP

npm install gsap

二、开始GSAP

导入GSAP，如果需要导入gsap的插件可以参考这里。

import gasp  from 'gsap';

这里用的是选项式，在methods属性中创建一个方法用来写gsap的动画。

gasp_animation(){
    let tl = gasp.timeline({defaults:{ ease:"power4.inOut", duration:2 }});
    tl.to(".sec-dec h1", {'clip-path': 'polygon(0% 100%,100% 100%,100% 0%,0% 0%)',y: 0,opacity: 1, duration: 2.2 } )
     .to(".search-container", {'clip-path': 'polygon(0% 100%,100% 100%,100% 0%,0% 0%)',opacity: 1}, "-=2")
    .to(".art-card", { stagger: .2,opacity: 1},"-=2")
    .to(".title",{stagger: .2,opacity: 1,y: 0},"-=2")
    .to(".desc",{stagger: .2,opacity: 1,y: 0},"-=2")
    .to("footer",{'clip-path': 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',opacity: 1,x: 0},"-=1");
}

 第一行是创建一个timeline,这是gsap中一个强大的排序工具，易于把一套动画作为一个整体进行控制并且能精确管理时间。在timeline中动画默认是挨个运行的，就是说第一个动画运行完第二个才开始运行，当然你可以设置某个动画提前运行，defaults是默认属性，ease是动画过渡，duration是每个动画的过渡时间。

let tl = gasp.timeline({defaults:{ ease:"power4.inOut", duration:2 }});

下面几行就是写gasp的动画，to()方法的意思是，from初始位置to最终位置，就是说你要填的是元素最终的样式。下面是动画的模板。

.to("CSS 选择器", {元素样式和gsap自家参数}, "时间控制")

 三、在页面加载时运行动画

mounted(){
  this.gasp_animation();
},