Smashing电子杂志10周年庆祝动画

带三角帽的知识分子和撒彩豆动画。

svg, anniversary

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

TweenMax.set("#ten", {
    css: {
        transformPerspective: 400,
        perspective: 400,
        transformStyle: "preserve-3d"
    },
    scale: 0,
    visibility: "visible"
});
TweenMax.set("#lines10 line", {
    scale: 0,
    visibility: "visible"
});

// vitaly
function sceneOne() {
    var tl = new TimelineLite();

tl.add("start");
    //blinking
    tl.to("#eyes-open", 0.1, {
        opacity: 0,
        scaleY: 0,
        transformOrigin: "50% 50%",
        repeat: -1,
        repeatDelay: 5,
        ease: Sine.easeOut
    }, "start+=1");
    tl.to("#eyes-open", 0.1, {
        opacity: 1,
        scaleY: 1,
        transformOrigin: "50% 50%",
        repeat: -1,
        repeatDelay: 5,
        ease: Sine.easeIn
    }, "start+=1.12");
    tl.to("#eyes-closed", 0.1, {
        autoAlpha: 1,
        repeat: -1,
        repeatDelay: 5,
        ease: Sine.easeOut
    }, "start+=1");
    tl.to("#eyes-closed", 0.1, {
        autoAlpha: 0,
        repeat: -1,
        repeatDelay: 5,
        ease: Sine.easeIn
    }, "start+=1.12");
    //chewing
    tl.to("#mouth", 0.1, {
        y: -5,
        scaleY: 0.5,
        transformOrigin: "50% 50%",
        repeat: 11,
        yoyo: true,
        ease: Sine.easeOut
    }, "start+=0.5");
    tl.to("#mouth-open", 0.1, {
        opacity: 0,
        scaleY: 0,
        transformOrigin: "50% 50%",
        ease: Sine.easeOut
    }, "start+=0.5");
    tl.to("#mouth-open", 0.1, {
        opacity: 1,
        scaleY: 1,
        transformOrigin: "50% 50%",
        ease: Sine.easeIn
    }, "start+=1.5");
    tl.to("#mouth-chew2", 1, {
        autoAlpha: 1,
        ease: Sine.easeOut
    }, "start+=0.1");
    tl.to("#mouth-chew2", 0.1, {
        autoAlpha: 0,
        ease: Sine.easeIn
    }, "start+=1.4");

return tl;
}

// cat comes on
function sceneTwo() {
    var tl = new TimelineLite();

tl.add("begin");
    //cat stuff
    tl.to("#cat", 0.5, {
        x: 20,
        ease: Bounce.easeOut
    }, "begin");
    tl.to("#arm", 1, {
        rotation: 30,
        transformOrigin: "100% 50%",
        ease: Elastic.easeOut
    }, "begin+=1");
    tl.staggerFromTo("#balls1 g circle, #balls1 g path", 0.5, {
            y: -200,
            autoAlpha: 0
        }, {
            y: 0,
            autoAlpha: 1,
            ease: Bounce.easeOut
        },
        0.01, "begin+=1");
    tl.staggerFromTo("#balls2 g circle, #balls2 g path", 0.75, {
            y: -300,
            autoAlpha: 0
        }, {
            y: 0,
            autoAlpha: 1,
            ease: Bounce.easeOut
        },
        0.01, "begin+=1");
    tl.staggerFromTo("#balls3 g circle, #balls3 g path", 0.65, {
            y: -400,
            autoAlpha: 0
        }, {
            y: 0,
            autoAlpha: 1,
            ease: Bounce.easeOut
        },
        0.01, "begin+=1");
    tl.staggerFromTo("#upper-balls circle", 0.65, {
            y: -200,
            autoAlpha: 0
        }, {
            y: 0,
            autoAlpha: 1,
            ease: Bounce.easeOut
        },
        0.01, "begin+=5");
    tl.to("#ten", 2.5, {
        scale: 1,
        rotationX: 3220,
        ease: Power2.easeOut,
        fill: "#e83d32",
        transformOrigin: "50% 50%"
    }, "begin+=2");
    tl.staggerTo("#lines10 line", 2.5, {
        scale: 1,
        stroke: "#f9ed32",
        transformOrigin: "50% 50%",
        ease: Elastic.easeOut
    }, 0.1, "begin+=2");

return tl;
}

var master = new TimelineLite();
$(document).ready(master)
master.add("mastergo")
    .add(sceneOne(), "mastergo")
    .add(sceneTwo(), "mastergo+=2");

//master.seek("scene2");

编译

CSS

HTML

带三角帽的知识分子和撒彩豆动画。

svg, anniversary

编辑器支持Emmet

快捷键

带三角帽的知识分子和撒彩豆动画。

svg, anniversary

使用Tweenmax + Snap.svg实现带海面倒影的日落动画特效

使用gsap的timeline插件实现的渐变线路和脉冲动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：