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>


相关文章
|
6月前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
4月前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
108 0
|
6月前
|
移动开发 小程序 API
uniapp组件库SwipeAction 滑动操作 使用方法
uniapp组件库SwipeAction 滑动操作 使用方法
156 1
|
6月前
|
JSON 小程序 JavaScript
小程序如何使用自定义组件
小程序如何使用自定义组件
173 0
|
12月前
|
前端开发
React基础语法03-引入本地图片和服务器图片的方法
React基础语法03-引入本地图片和服务器图片的方法
119 0
|
前端开发 JavaScript API
前端封装库/工具库的动画之Anime.js
随着互联网时代的到来,Web应用程序中的动画效果变得越来越重要。为了更好地实现这项任务,前端封装库/工具库的出现成为一个非常好的解决方案。其中一款备受关注的动画库是Anime.js。
230 1
|
存储 前端开发 JavaScript
前端封装库/工具库的编辑器之Slate.js
随着互联网时代的到来,Web应用程序的内容创作和编辑变得越来越重要。而为了更高效地进行内容编辑和管理,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个备受关注的编辑器就是Slate.js。
757 0
|
前端开发 API 容器
前端封装库/工具库的编辑器之Draft.js
在现代前端开发中,富文本编辑器是一个非常重要的组成部分。其中,Draft.js 是一个备受欢迎的 React 富文本编辑器库。
880 0
|
JavaScript
Vue实现图片大图预览,v-viewer组件的使用方法演示
Vue实现图片大图预览,v-viewer组件的使用方法演示
506 0
|
JavaScript API 容器
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解