响应GreenSock教学怪物

Responsive GreenSock-Teaching Monster 以直观的方式演示代码对怪物各个肢体部分动画的作用。教你学GSAP。

gsap, 教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2490
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

var $monstaP = $(".monsta path"),
    $tmx = $(".tmx"),
    $tmx2 = $(".tmx2"),
    $antt = $(".antt"),
    $eye = $(".eye"),
    $pupil = $(".pupil"),
    $arms = $("#arms"),
    $code = $(".code"),
    $comment = $(".comment");

TweenMax.set($monstaP, {
    stroke: "#3a506b"
});

TweenMax.set(".code, .bye, .monsta", {
    visibility: "visible"
});

// draw the character + first TweenMax
function sceneOne() {
    var tl = new TimelineLite(),
        codeST = new SplitText($tmx, {
            type: "words, chars"
        });

tl.fromTo($monstaP, 4, {
        drawSVG: "50% 50%"
    }, {
        drawSVG: true,
        ease: Power2.easeOut
    });
    tl.from($monstaP, 3, {
        fill: "none",
        ease: Power2.easeOut
    }, "-=1");
    tl.to($monstaP, 2, {
        stroke: "none",
        ease: Power2.easeOut
    }, "-=2");
    tl.add("blink-=1");
    tl.from($comment, 0.7, {
        opacity: 0,
        scale: 0,
        transformOrigin: "0% 50%",
        ease: Power4.easeOut
    }, "blink");
    tl.staggerFrom(codeST.chars, 0.1, {
        opacity: 0,
        scale: 0.8,
        ease: Power4.easeOut
    }, 0.03, "blink+=1");
    tl.staggerTo(codeST.chars, 0.1, {
        color: "#509EA4",
        ease: Power4.easeOut
    }, 0.03, "blink+=1.1");
    tl.to($eye, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "blink+=4.3");
    tl.to($pupil, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "blink+=4.3");
    tl.to($comment, 0.8, {
        opacity: 0,
        scale: 0.8,
        transformOrigin: "50% 50%",
        ease: Power4.easeOut
    }, "blink+=4.5");

return tl;
}

// two TweenMax 
function sceneTwo() {
    var tl = new TimelineLite(),
        codeST = new SplitText($tmx2, {
            type: "words, chars"
        });

tl.add("anten", "+=1");
    tl.call(function() {
        $(".comment").replaceWith('<p class="comment1">//Two Tweens</p>');
    });
    tl.to(".comment1", 2, {
        opacity: 1,
        transformOrigin: "0% 50%",
        ease: Power4.easeOut
    }, "anten+=0.1");
    tl.staggerFrom(codeST.chars, 0.1, {
        opacity: 0,
        scale: 0,
        ease: Power4.easeOut
    }, 0.03, "anten+=1");
    tl.staggerTo(codeST.chars, 0.1, {
        color: "#509EA4",
        ease: Power4.easeOut
    }, 0.03, "anten+=1.1");
    tl.to($eye, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "anten+=4.3");
    tl.to($pupil, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "anten+=4.3");
    tl.to($antt, 0.15, {
        scaleY: 1.1,
        rotation: 5,
        repeat: 4,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Bounce.easeInOut
    }, "anten+=4.3");

return tl;
}

// timeline 
function sceneThree() {
    var tl = new TimelineLite(),
        tll = $(".tll"),
        newTL = new SplitText(".tll", {
            type: "words, chars"
        });

tl.add("timeline1");
    tl.call(function() {
        $(".comment1").replaceWith('<p class="comment2">//A Simple Timeline</p>');

$(".tmx div").filter(":first").replaceWith('<span class="spacer"></span>tl.to(".eye",');
        $(".tmx").css("color", "#509EA4");

$(".tmx2 div").filter(":first").replaceWith('<span class="spacer"></span>tl.to(".antenna",');
        $(".tmx2").css("color", "#509EA4");

TweenMax.set(tll, {
            display: "block",
            opacity: 1
        });

TweenMax.set(newTL.chars, {
            opacity: 0,
            scale: 0
        });
    });
    tl.to(".comment2", 2, {
        opacity: 1,
        transformOrigin: "0% 50%",
        ease: Power4.easeOut
    }, "timeline1+=0.1");
    tl.to(tll, 2, {
        scaleY: 1,
        transformOrigin: "50% 50%",
        ease: Circ.easeOut
    }, "timeline1+=0.1");
    tl.staggerTo(newTL.chars, 0.1, {
        opacity: 1,
        scale: 1,
        transformOrigin: "50% 50%",
        ease: Power4.easeOut
    }, 0.03, "timeline1+=1");
    tl.staggerTo(newTL.chars, 0.1, {
        color: "#509EA4",
        ease: Power4.easeOut
    }, 0.03, "timeline1+=1.1");
    tl.to($eye, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "timeline1+=2.5");
    tl.to($pupil, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "timeline1+=2.5");
    tl.to($antt, 0.15, {
        scaleY: 1,
        rotation: 0,
        repeat: 4,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Bounce.easeInOut
    }, "timeline1+=3.5");

return tl;
}

// master1 
function sceneFour() {
    var tl = new TimelineLite(),
        func1 = new SplitText(".function1", {
            type: "words, chars"
        }),
        func2 = new SplitText(".function2", {
            type: "words, chars"
        }),
        master1 = new SplitText(".master", {
            type: "words, chars"
        });

tl.add("master1", "+=1");
    tl.call(function() {
        $(".comment2").replaceWith('<p class="comment3">//A Master Timeline</p>');

TweenMax.set(".function1, .function2, .master", {
            display: "block"
        });

TweenMax.set([func1.chars, func2.chars, master1.chars], {
            opacity: 0,
            scale: 0
        });
    });
    tl.to(".comment3", 2, {
        opacity: 1,
        transformOrigin: "0% 50%",
        ease: Power4.easeOut
    }, "timeline1+=0.1");
    tl.to($code, 2, {
        scale: 0.7,
        transformOrigin: "0% 0%",
        ease: Circ.easeOut
    }, "timeline1+=0.1");
    tl.to(".function1", 2, {
        scaleY: 1,
        transformOrigin: "50% 50%",
        ease: Circ.easeOut
    }, "timeline1+=0.1");

tl.staggerTo(func1.chars, 0.1, {
        opacity: 1,
        scale: 1,
        transformOrigin: "50% 50%",
        ease: Power4.easeOut
    }, 0.03, "timeline1+=1");
    tl.staggerTo(func1.chars, 0.1, {
        color: "#509EA4",
        ease: Power4.easeOut
    }, 0.03, "timeline1+=1.1");

tl.staggerTo(func2.chars, 0.1, {
        opacity: 1,
        scale: 1,
        transformOrigin: "50% 50%",
        ease: Power4.easeOut
    }, 0.03, "timeline1+=2");
    tl.staggerTo(func2.chars, 0.1, {
        color: "#509EA4",
        ease: Power4.easeOut
    }, 0.03, "timeline1+=2.1");

tl.staggerTo(master1.chars, 0.1, {
        opacity: 1,
        scale: 1,
        transformOrigin: "50% 50%",
        ease: Power4.easeOut
    }, 0.03, "timeline1+=3");
    tl.staggerTo(master1.chars, 0.1, {
        color: "#509EA4",
        ease: Power4.easeOut
    }, 0.03, "timeline1+=3.1");

tl.to($eye, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "timeline1+=6");
    tl.to($pupil, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "timeline1+=6");
    tl.to($antt, 0.15, {
        scaleY: 0.9,
        rotation: 4,
        repeat: 4,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Bounce.easeInOut
    }, "timeline1+=7");

return tl;
}

// master2 
function sceneFive() {
    var tl = new TimelineLite(),
        addM = new SplitText(".addMaster", {
            type: "words, chars"
        }),
        master2 = new SplitText(".addFunction p", {
            type: "words, chars"
        });

tl.add("master2", "+=1");
    tl.call(function() {
        TweenMax.set(".addFunction, .addMaster", {
            display: "block"
        });

TweenMax.set([master2.chars, addM.chars], {
            opacity: 0,
            scale: 0
        });
    });
    tl.staggerTo(master2.chars, 0.1, {
        opacity: 1,
        scale: 1,
        transformOrigin: "50% 50%",
        ease: Power4.easeOut
    }, 0.03, "master2");
    tl.staggerTo(master2.chars, 0.1, {
        color: "#509EA4",
        ease: Power4.easeOut
    }, 0.03, "master2+=0.1");

tl.staggerTo(addM.chars, 0.1, {
        opacity: 1,
        scale: 1,
        transformOrigin: "50% 50%",
        ease: Power4.easeOut
    }, 0.03, "master2+=6.5");
    tl.staggerTo(addM.chars, 0.1, {
        color: "#509EA4",
        ease: Power4.easeOut
    }, 0.03, "master2+=6.6");

tl.to($eye, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "master2+=8");
    tl.to($pupil, 0.23, {
        scaleY: 0,
        repeat: 3,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Power4.easeInOut
    }, "master2+=8");
    tl.to($antt, 0.15, {
        scaleY: 1.1,
        rotation: 0,
        repeat: 4,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Bounce.easeInOut
    }, "master2+=9");
    tl.to(".wings", 0.1, {
        scaleY: 0.8,
        rotation: -5,
        repeat: 7,
        yoyo: true,
        transformOrigin: "50% 50%",
        ease: Bounce.easeInOut
    }, "master2+=10");

return tl;
}

// waves
function waves() {
    var tl = new TimelineLite(),
        bye = new SplitText(".bye", {
            type: "words, chars"
        }),
        arms2 = $("#arms-second"),
        arms3 = $("#arms-third");

tl.add("arms");
    tl.call(function() {
        TweenMax.set(".bye", {
            display: "block"
        });

TweenMax.set(bye.chars, {
            opacity: 0,
            scaleX: 0,
            css: {
                transformPerspective: 400,
                perspective: 400,
                transformStyle: "preserve-3d"
            }
        });
    });
    tl.to($code, 1.8, {
        opacity: 0,
        ease: Circ.easeIn
    }, "arms");
    tl.to($code, 0.1, {
        display: "none"
    }, "arms+=1.9");
    tl.staggerTo(bye.chars, 3, {
        opacity: 1,
        css: {
            rotationX: 720,
            scaleX: 1,
            z: 50,
            color: "#BC5B80"
        },
        ease: Bounce.easeOut
    }, "arms+=2");
    tl.to($arms, 0.1, {
        morphSVG: arms2,
        ease: Linear.easeNone
    }, "arms+=5");
    tl.to($arms, 0.1, {
        morphSVG: arms3,
        ease: Linear.easeNone
    }, "arms+=5.1");
    tl.to($arms, 0.1, {
        morphSVG: arms2,
        ease: Linear.easeNone
    }, "arms+=5.2");
    tl.to($arms, 0.1, {
        morphSVG: $arms,
        ease: Linear.easeNone
    }, "arms+=5.3");

tl.to($arms, 0.1, {
        morphSVG: arms2,
        ease: Linear.easeNone
    }, "arms+=5.4");
    tl.to($arms, 0.1, {
        morphSVG: arms3,
        ease: Linear.easeNone
    }, "arms+=5.5");
    tl.to($arms, 0.1, {
        morphSVG: arms2,
        ease: Linear.easeNone
    }, "arms+=5.6");
    tl.to($arms, 0.1, {
        morphSVG: $arms,
        ease: Linear.easeNone
    }, "arms+=5.7");

return tl;
}

var master = new TimelineLite();
$(document).ready(master)
master.add(sceneOne(), "scene1")
    .add(sceneTwo(), "scene2", "+=2")
    .add(sceneThree(), "scene3", "+=2")
    .add(sceneFour(), "scene4", "+=1")
    .add(sceneFive(), "scene5")
    .add(waves(), "wavey");

//master.seek("wavey");

编译

CSS

body {
    background: #0b132b;
    font-family: 'Fira Mono', monospace;
}
.monsta {
    margin-top: -60px;
    width: 40%;
    margin-left: 3%;
    float: left;
}
.code,
.bye,
.monsta {
    visibility: hidden;
}
.tll,
.function1,
.function2,
.master,
.addFunction,
.addMaster,
.bye {
    display: none;
}
.addMaster {
    margin-top: 0;
}
.master {
    margin-bottom: 0;
}
.bye {
    margin-top: 70px;
    float: left;
    width: 40%;
}
.spacer {
    margin-left: 56px;
}
.code {
    float: left;
    width: 50%;
    margin-top: 30px;
}
.eye {
    fill: white;
}
.tmxPrev {
    width: 78px;
    float: left;
}
.comment,
.comment1,
.comment2,
.comment3 {
    color: #666;
}
.eyelids {
    fill: #8AD6D0;
}
.pupils {
    fill: black;
}
#arms-second,
#arms-third {
    display: none;
}
h2 {
    font-size: 90px;
    letter-spacing: 0.1em;
}
p,
h2 {
    color: #6FFEE8;
}
.cls-1 {
    isolation: isolate;
}
.cls-2,
.cls-8 {
    fill: #0b132b;
}
.cls-3 {
    opacity: 0.2;
}
.cls-4 {
    fill: #3a506b;
}
.cls-10,
.cls-11,
.cls-12,
.cls-13,
.cls-4,
.cls-5,
.cls-6,
.cls-8,
.cls-9 {
    fill-rule: evenodd;
}
.cls-5 {
    fill: #4b8199;
}
.cls-6 {
    fill: #5bbfbd;
}
.cls-7 {
    opacity: 0.3;
}
.cls-9 {
    fill: #bc5b80;
}
.cls-10 {
    fill: #fff;
}
.cls-11 {
    fill: #6ffee8;
}
.cls-12 {
    fill: #399994;
}
.cls-13 {
    fill: #8ad6d0;
}
@media screen and (max-width: 1000px) {
    .monsta {
        margin-top: 0 !important;
        width: 45% !important;
        margin-left: 0 !important;
    }
    .code,
    .bye {
        width: 48% !important;
    }
}
@media screen and (max-width: 545px) {
    .monsta {
        margin-top: -30px !important;
        width: 100% !important;
    }
    .code,
    .bye {
        width: 85% !important;
        margin-top: -100px !important;
        margin-left: 9% !important;
    }
    .code {
        font-size: 0.9em;
    }
    .bye {
        text-align: center;
    }
}

HTML

<div class="code">
    <p class="comment">//Simple Tween</p>
    <div class="addFunction">
        <p>function flap() {</p>
        <p>var tl = new TimelineLite();</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tl.to(".wings", 0.1, {scaleY:0.8, rotation:-5, repeat:7, yoyo:true, transformOrigin: "50% 50%", ease:Bounce.easeInOut}, "master2+=10");</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return tl;
            <br> }
        </p>
    </div>
    
    <p class="function1">function blinky() {</p>
    <p class="tll">var tl = new TimelineLite();</p>
    <p class="tmx">TweenMax.to(".eye", 0.1, {scaleY:0, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut});</p>
    <p class="tmx2">TweenMax.to(".antenna", 0.1, {scaleY:0, rotation:5, repeat:3, yoyo:true, transformOrigin: "50% 50%", ease:Power4.easeInOut});</p>
    <p class="function2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return tl;
        <br> }
    </p>
    <p class="master">var master = new TimelineLite();
        <br> $(document).ready(master)
        <br> master.add(blinky());
    </p>
    <p class="addMaster">
        master.add(flap());</p>
</div>
<h2 class="bye">Bye!</h2>

Responsive GreenSock-Teaching Monster 以直观的方式演示代码对怪物各个肢体部分动画的作用。教你学GSAP。

gsap, 教程

编辑器支持Emmet

快捷键

Responsive GreenSock-Teaching Monster 以直观的方式演示代码对怪物各个肢体部分动画的作用。教你学GSAP。

gsap, 教程

使用GSAP和Bodymovin实现的响应式乐高模型

GSAP+CSS3 DrawSVGPlugin Values使用演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：