GSAP+SVG 做圣诞蛋糕的动画

HTML5做蛋糕动画。

GSAP, SVG

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var $foundation = $('#foundation'),
    $sponge = $('#sponges > .sponge'),
    $spongeCream = $('#sponge-creams > .sponge-cream'),
    $cutStrawberry1 = $('#cut-strawberries-1 > .cut-strawberry'),
    $cutStrawberry2 = $('#cut-strawberries-2 > .cut-strawberry'),
    $strawberry1 = $('#strawberries-1 > .strawberry'),
    $strawberry2 = $('#strawberries-2 > .strawberry'),
    $ribon = $('#ribon'),
    $chocolate = $('#chocolate'),
    $chocolateMessage = $('.chocolate-message path'),
    $sideCream = $('#cream-sides > .cream-side'),
    $whipCream = $('#cream-whips > .cream-whip'),
    $spatula = $('#spatula'),
    $bag = $('#bag');

var tl = new TimelineMax();
tl.set($foundation, {
        y: 25,
        autoAlpha: 1
    })
    .set($sideCream, {
        scaleX: 0,
        autoAlpha: 1
    })
    .to($foundation, 0.25, {
        y: 0,
        ease: Power2.easeIn
    })
    .set($sponge, {
        y: -522,
        autoAlpha: 1
    })
    .to($sponge[0], 0.25, {
        y: 0,
        ease: Bounce.easeOut
    })
    .set($spongeCream, {
        scaleX: 0,
        autoAlpha: 1
    })
    .to($spongeCream[0], 1, {
        scaleX: 1
    })
    .to($spongeCream[1], 1, {
        scaleX: 1
    })
    .set($cutStrawberry1, {
        y: -522,
        autoAlpha: 1
    })
    .staggerTo($cutStrawberry1, 0.25, {
        y: 0,
        ease: Expo.easeOut
    }, 0.25)
    .to($sponge[1], 0.25, {
        y: 0,
        ease: Bounce.easeOut
    })
    .to($spongeCream[2], 1, {
        scaleX: 1,
    })
    .to($spongeCream[3], 1, {
        scaleX: 1,
    })
    .set($cutStrawberry2, {
        y: -522,
        autoAlpha: 1
    })
    .staggerTo($cutStrawberry2, 0.25, {
        y: 0,
        ease: Expo.easeOut
    }, 0.25)
    .to($sponge[2], 0.25, {
        y: 0,
        ease: Bounce.easeOut
    })
    .set($spatula, {
        x: 396.23,
        rotation: 0,
        autoAlpha: 1
    })
    .to($spatula, 1, {
        x: 0,
        rotation: 720
    })
    .to($spatula, 1.5, {
        x: 125.416
    })
    .to($spatula, 1.5, {
        x: 250.832
    })

.to($sideCream[0], 1.5, {
        scaleX: 1
    }, '-=3')
    .to($sideCream[1], 1.5, {
        scaleX: 1
    }, '-=1.5')
    .to($spatula, 0.25, {
        autoAlpha: 0
    })
    .fromTo($bag, 0.7, {
        y: -522,
        autoAlpha: 1
    }, {
        y: 0
    })
    .set($whipCream, {
        scaleY: 0,
        autoAlpha: 1
    })
    .to($whipCream[0], 0.5, {
        scaleY: 1
    })
    .to($bag, 0.5, {
        x: 34.83
    })
    .to($whipCream[1], 0.5, {
        scaleY: 1
    })
    .to($bag, 0.5, {
        x: 69.66
    })
    .to($whipCream[2], 0.5, {
        scaleY: 1
    })
    .to($bag, 0.5, {
        x: 104.49
    })
    .to($whipCream[3], 0.5, {
        scaleY: 1
    })
    .to($bag, 0.5, {
        x: 139.32
    })
    .to($whipCream[4], 0.5, {
        scaleY: 1
    })
    .to($bag, 0.5, {
        x: 174.15
    })
    .to($whipCream[5], 0.5, {
        scaleY: 1
    })
    .to($bag, 0.5, {
        x: 208.98
    })
    .to($whipCream[6], 0.5, {
        scaleY: 1
    })
    .to($bag, 0.25, {
        autoAlpha: 0
    })
    .set($strawberry2, {
        y: -522,
        autoAlpha: 1
    })
    .staggerTo($strawberry2, 0.25, {
        y: 0,
        ease: Expo.easeOut
    }, 0.1)
    .set($strawberry1, {
        y: -522,
        autoAlpha: 1
    })
    .staggerTo($strawberry1, 0.25, {
        y: 0,
        ease: Expo.easeOut
    }, 0.1)
    .fromTo($ribon, 1, {
        y: -522,
        x: -514,
        rotation: 0,
        transformOrigin: "50% 50%",
        autoAlpha: 1
    }, {
        y: 0,
        x: 0,
        rotation: 720
    })
    .fromTo($chocolate, 1, {
        y: -466.534, //-522+55.466
        x: 389.006, //514-124.994
        autoAlpha: 1,
        scale: 6
    }, {
        y: 0,
        x: 0,
        scale: 1,
        ease: Expo.easeOut
    })
    .staggerTo($chocolateMessage, 0.5, {
        strokeDashoffset: 0
    }, 0.15);

编译

CSS

body {
    background: #9AE5A1;
    margin: 0;
    padding: 0;
}
.container {
    margin: 0 auto;
    max-width: 580px;
    width: 75vw;
}
.color-bg {
    fill: #9AE5A1;
}
.color-brown-1 {
    fill: #D6BDAB;
}
.color-brown-2 {
    fill: #996666;
}
.color-brown-3 {
    fill: #996633;
}
.color-beige {
    fill: #F2EAC7;
}
.color-white {
    fill: #FFFFFF;
}
.color-red-1 {
    fill: #FF6666;
}
.color-red-2 {
    fill: #FF8080;
}
.color-red-3 {
    fill: #FF9999;
}
.color-red-4 {
    fill: #FFB3B3;
}
.color-red-5 {
    fill: #FFCCCC;
}
.color-red-6 {
    fill: #FFD9D9;
}
.color-red-7 {
    fill: #FFE6E6;
}
.color-red-8 {
    fill: #FFF2F2;
}
.color-green {
    fill: #66CC99;
}
.color-bordeaux-1 {
    fill: #993333;
}
.color-bordeaux-2 {
    fill: #CC6666;
}
.color-yellow {
    fill: #FFCC66;
}
.color-gold {
    fill: #FFCC99;
}
.color-gray {
    fill: #CCCCCC;
}
.shadow {
    fill-opacity: 0.1;
}
#foundation,
#sponges > .sponge,
#sponge-creams > .sponge-cream,
#cut-strawberries-1 > .cut-strawberry,
#cut-strawberries-2 > .cut-strawberry,
#cream-sides > .cream-side,
#cream-whips > .cream-whip,
#strawberries-1 > .strawberry,
#strawberries-2 > .strawberry,
#ribon,
#chocolate,
#spatula,
#bag {
    visibility: hidden;
}
.chocolate-message path {
    fill: none;
    stroke: #FFCC99;
    stroke-width: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

HTML

HTML5做蛋糕动画。

GSAP, SVG

编辑器支持Emmet

快捷键

HTML5做蛋糕动画。

GSAP, SVG

GSAP+SVG 有渐变动效的LOADING加载动画

GSAP+SVG 两个圈的交替缩扩动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：