GSAP动画效果总结页

2015-04-212022-12-25Web笔记webJavaScriptCSS3动画62 字约 1 分钟1

GSAP动画效果总结页

记录下最近常用的以及自己设置出来的效果，免得日后需要时还要去项目里翻。

放大

1
TweenLite.from($("#titile"), 1, {scale:0.0, opacity:0.0});
2
TweenLite.to($("#titile"), 1, {scale:1.0, opacity:1.0});

缩小

1
TweenLite.from($("#titile"), 1, {scale:2.0, opacity:2.3});
2
TweenLite.to($("#titile"), 1, {scale:1.0, opacity:1.0});

向前移动（前移/由远及近）

1
TweenLite.from($("#titile"), 1, {x:"100",y:"10",scale:0.5,ease:Back.easeOut});
2
TweenLite.to($("#titile"), 1, {x:"10",y:"20",scale:1.0});

向后移动（由近及远）

1
TweenLite.from($("#titile"), 1, {x:"100",y:"200",scale:1.0,ease:Back.easeOut});
2
TweenLite.to($("#titile"), 1, {x:"10",y:"20",scale:0.5});

本文采用 CC BY-NC-SA 4.0 许可，转载请注明出处与作者。

支持一下

如果这篇文章对你有帮助，欢迎打赏或分享。

评论