HTML5 GSAP 小猫扫雪加载进度动画

Squirrel Clearing Snow Preloader（progress bar）

svg, snow

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    particle = select('.particle'),
    container = select('.container'),
    display = select('.display'),
    num = 200,
    pWidth = 4,
    pArr = [],
    squirrel = select('.squirrel'),
    dur = 3

TweenMax.set('svg', {
    visibility: 'visible'
})
TweenMax.set(squirrel, {
    x: -54,
    y: 170
})

function make() {
    var p;

for (var i = 0; i < num; i++) {

p = particle.cloneNode(true);
        container.appendChild(p);
        pArr.push(p);
        TweenMax.set(p, {
            x: i * pWidth,
            y: 196,
            transformOrigin: '50% 50%'
        })

}

make();
var mainTl = new TimelineMax({
    onUpdate: onUpdate
});
mainTl.staggerTo(pArr, dur, {
        cycle: {
            physics2D: function() {
                return {
                    velocity: randomBetween(5, 100),
                    gravity: randomBetween(500, 900),
                    angle: randomBetween(-123, 45)
                }
            }
        },
        scale: 0.3,
        onComplete: function() {
            container.removeChild(this.target);
        },
        ease: Power1.easeOut
    }, 0.1)
    .to(squirrel, mainTl.duration() - dur, {
        x: '+=800',

ease: Linear.easeNone
    }, '-=' + mainTl.duration() - dur)

function randomBetween(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

TweenMax.to('.foot', 0.1, {
    rotation: 23,
    repeat: -1,
    yoyo: true,
    onRepeat: function() {
        if (mainTl.progress() > 0.87) {
            this.kill()
        }
    }
})

编译

CSS

HTML

Squirrel Clearing Snow Preloader（progress bar）

svg, snow

编辑器支持Emmet

快捷键

Squirrel Clearing Snow Preloader（progress bar）

svg, snow

HTML5/GSAP雪花形状堆积拼装加载动画

HTML5 GSAP七彩苹果LOGO组装动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：