GreenSock动效库TweenMax简单使用代码片段

简介: GreenSock动效库TweenMax简单使用代码片段


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
 
<script type="text/javascript">
 
    //demo 1----------------------------------------
    TweenMax.to("CSSselectors", 1, {
        opacity: 0,
        ease: Strong.easeOut,
        delay: 1,
        onComplete: function () {
            //一些动画结束后要触发的动作
            /*document.querySelector("CSSselectors").style.*/
        }
    });
 
    //demo 2----------------------------------------
    TweenLite.to(DOM元素, 1, {
        opacity: 0,
        scale: 1.2,
        ease: Strong.easeOut,
        delay: 1,
        onComplete: completeHandler,
        onCompleteParams: ["传参"]
    });
 
    //demo 3----------------------------------------
    let tl = new TimelineMax({repeat: 0, repeatDelay: 0});
    tl.to(".green", 1, {x: 200})
        .to(".orange", 1, {x: 200, scale: 0.2}, "+=1").addLabel("greyAndPink")
        .to(".grey", 1, {x: 200, scale: 2, y: 20}, "greyAndPink")
        .to(".pink", 1, {x: 200, rotation: 360}, "greyAndPink");
 
</script>


相关文章
|
9月前
|
XML 编解码 前端开发
【web组件库系列】封装自己的字体图标库
【web组件库系列】封装自己的字体图标库
164 0
|
9月前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
9月前
|
移动开发 小程序 API
uniapp中uview组件库丰富的CountTo 数字滚动使用方法
uniapp中uview组件库丰富的CountTo 数字滚动使用方法
123 2
|
9月前
|
移动开发 小程序 API
uniapp组件库SwipeAction 滑动操作 使用方法
uniapp组件库SwipeAction 滑动操作 使用方法
224 1
|
9月前
|
移动开发 小程序 前端开发
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法
1318 1
|
9月前
|
API
uniapp中组件库的丰富NumberBox 步进器的用法
uniapp中组件库的丰富NumberBox 步进器的用法
333 0
|
前端开发
React基础语法03-引入本地图片和服务器图片的方法
React基础语法03-引入本地图片和服务器图片的方法
150 0
|
前端开发 JavaScript API
前端封装库/工具库的编辑器之TinyMCE
在现代前端开发中,富文本编辑器是一个非常重要的组成部分。其中,TinyMCE 是一个备受欢迎的 JavaScript 富文本编辑器库。
351 1
|
前端开发 JavaScript API
前端封装库/工具库的编辑器之CKEditor
在现代前端开发中,富文本编辑器是一个非常重要的组成部分。其中,CKEditor 是一个备受欢迎的 JavaScript 富文本编辑器库。
229 0
|
JavaScript
Vue实现图片大图预览,v-viewer组件的使用方法演示
Vue实现图片大图预览,v-viewer组件的使用方法演示
715 0

热门文章

最新文章