mg模板综合分享.docxVIP

!DOCTYPEhtml

MG动画模板

divclass=text-elementid=titleMG动画模板/div

divclass=text-elementid=subtitle纯前端实现/div

divclass=shapeid=circle/div

divclass=path-lineid=motion-path/div

/div

script

document.addEventListener(DOMContentLoaded,()={

constcontainer=document.getElementById(animation-container);

consttitle=document.getElementById(title);

constsubtitle=document.getElementById(subtitle);

constcircle=document.getElementById(circle);

constpath=document.getElementById(motion-path);

//初始化元素位置

functioninitElements(){

constcenterX=window.innerWidth/2;

constcenterY=window.innerHeight/2;

title.style.left=`${centerX-100}px`;

title.style.top=`${centerY-60}px`;

subtitle.style.left=`${centerX-60}px`;

subtitle.style.top=`${centerY+20}px`;

circle.style.width=150px;

circle.style.height=150px;

circle.style.left=`${centerX-75}px`;

circle.style.top=`${centerY+100}px`;

path.style.width=300px;

path.style.left=`${centerX+50}px`;

path.style.top=`${centerY+175}px`;

path.style.transform=rotate(30deg);

}

//GSAP动画序列

functionstartAnimation(){

consttl=gsap.timeline();

//标题动画

tl.to(title,{

duration:1,

opacity:1,

y:0,

ease:power2.out

});

//副标题动画

tl.to(subtitle,{

duration:0.8,

opacity:1,

y:0,

ease:back.out

},-=0.5);

//圆形出现动画

tl.to(circle,{

duration:1,

opacity:1,