使用GSAP构建的蜡烛点火开关

Animated Candle Toggle with GSAP

svg, candle, switch

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

TweenMax.set('svg', {
    visibility: "visible"
});
TweenMax.set('#flameGroup', {
    y: -110,
    x: -15,
    transformOrigin: "center bottom"
})
TweenMax.set('#flameGroup ellipse', {
    scale: 0,
    transformOrigin: "center bottom"
});
TweenMax.set('#ring', {
    scale: 0,
    y: 10,
    transformOrigin: "center center"
});
TweenMax.set('#squintL', {
    opacity: 0
})
TweenMax.set('#squintR', {
    opacity: 0
})
TweenMax.set('#speedLine', {
    drawSVG: "30% 30%"
})
TweenMax.set('#smoke', {
    drawSVG: "0% 0%"
})
TweenMax.set('#wind', {
    drawSVG: "0% 0%",
    opacity: 0
})
TweenMax.set('#lBrow', {
    opacity: 0,
    scale: 0,
    transformOrigin: "center center"
})
TweenMax.set('#rBrow', {
    opacity: 0,
    scale: 0,
    transformOrigin: "center center"
})
TweenMax.set('#mouth', {
    drawSVG: "50% 50%",
    opacity: 0
})
let body = document.querySelector('body');

// reset scene 
function resetScene() {
    let tl = new TimelineMax();
    // reset bg
    tl.to('#BG', 0.25, {
            attr: {
                fill: "#221D4C"
            },
            ease: Power4.easeInOut
        }, 'reset')
        .to(body, 0.25, {
            backgroundColor: "#221D4C",
            ease: Power4.easeInOut
        }, 'reset')
        // reset toggle
        .to('#toggleCircle', 0.25, {
            x: 0,
            attr: {
                fill: "#221D4C"
            },
            ease: Power4.easeInOut
        }, 'reset')
        // reset candle string color 
        .to('#candleString', 0.25, {
            attr: {
                fill: "#353542"
            },
            ease: Power4.easeInOut
        }, 'reset')
        // reset gradient
        .set('#candleGrad', {
            attr: {
                fill: "url(#candleGrad1)"
            }
        }, 'reset+=0.1')
        // reset eyes
        .to('#eyes ellipse', 0.25, {
            attr: {
                fill: "#221D4C"
            },
            ease: Power4.easeInOut
        }, 'reset')
    return tl;
}

// Toggle Switch
function buttonToggle() {
        let tl = new TimelineMax();
        tl.to('#toggleCircle', 0.25, {
                x: 45,
                ease: Power4.easeInOut
            }, 'active')
            .to('#toggle', 1, {
                x: 0,
                y: 0,
                ease: Sine.easeOut
            }, 'active')
        return tl;
    }
    // Master timeline
let masterTl = new TimelineMax({
    paused: true
});
masterTl.add(buttonToggle(), 0)
    .add(zoomInOut(), 0)
    .add(candleJump(), 0.5)
    .add(speedLine(), 1.1)
    .add(colorChange(), 1.25)
    .add(flameIn(), 1.3)
    .add(animateFlame(), 1.4)
    .add(animateShadow(), 1.4)
    .add(candleOut(), 2.40)
    .add(resetScene(), 2.45)

let particleMasterTl = new TimelineMax({
    paused: true
});
particleMasterTl.add(rightParticles, 1.6)
    .add(leftParticles, 1.6)

let sadTl = new TimelineMax({
    paused: true,
    delay: 3.5
});
// move brows + eyes
sadTl.to("#rBrow", 0.15, {
        opacity: 1,
        scale: 1,
        rotation: 25
    }, 'in')
    .to("#lBrow", 0.15, {
        opacity: 1,
        scale: 1,
        rotation: -25
    }, 'in')
    .to('#rBrow', 0.5, {
        rotation: 45
    }, 'sad')
    .to('#lBrow', 0.5, {
        rotation: -45
    }, 'sad')
    .to('#rEye', 0.3, {
        x: -3,
        y: -2
    }, 'sad')
    .to('#lEye', 0.3, {
        x: 3,
        y: -2
    }, 'sad')
    // move string
    .to('#candleString', 0.3, {
        rotation: 20
    }, 'sad')
    // mouth appears
    .fromTo('#mouth', 0.5, {
        drawSVG: "50% 50%"
    }, {
        drawSVG: "100%"
    }, 'sad')
    .fromTo('#mouth', 0.05, {
        opacity: 0
    }, {
        opacity: 1,
        ease: Linear.easeNone
    }, 'sad+=0.1')

let sadOutTl = new TimelineMax({
    paused: true
});
sadOutTl.to('#mouth', 0.3, {
        drawSVG: "50% 50%",
        opacity: 0
    }, 'in')
    .to("#rBrow", 0.3, {
        opacity: 0,
        drawSVG: "50% 50%",
        rotation: 25
    }, 'in')
    .to("#lBrow", 0.3, {
        opacity: 0,
        drawSVG: "50% 50%",
        rotation: -25
    }, 'in')
    .to('#rEye', 0.3, {
        x: 0,
        y: 0
    }, 'in')
    .to('#lEye', 0.3, {
        x: 0,
        y: 0
    }, 'in')
    .to('#candleString', 0.3, {
        rotation: 0,
        ease: Linear.easeNone
    }, 'in')

let refuseTl = new TimelineMax({
    paused: true
});
// shrink / anticipate jump
refuseTl.to('#candle', 0.6, {
        scaleY: 0.90,
        scaleX: 1.1,
        transformOrigin: "center bottom",
        ease: Power1.easeOut
    }, 'preJump')
    // jump
    .to('#candle', 0.3, {
        y: -75,
        scaleY: 1.05,
        scaleX: 0.95,
        transformOrigin: "center bottom"
    }, 'jump')
    // move string
    .to('#candleString', 0.10, {
        rotation: -30,
        transformOrigin: "center bottom"
    }, 'jump+=0.10')
    .to('#candleString', 0.10, {
        rotation: 25,
        transformOrigin: "center bottom"
    }, 'jump+=0.2')
    .to('#candleString', 0.15, {
        rotation: 0,
        transformOrigin: "center bottom"
    }, 'jump+=0.4')
    // jump landing
    .to('#candle', 0.20, {
        y: 0
    }, 'jump+=0.3')
    .to('#candle', 0.25, {
        scaleY: 0.93,
        scaleX: 1.1,
        transformOrigin: "center bottom",
        ease: Linear.easeNone
    }, 'jump+=0.35')
    .to('#candleTop', 0.25, {
        attr: {
            ry: 22
        },
        ease: Linear.easeNone
    }, 'jump+=0.3')
    .to('#candle', 0.25, {
        y: 0,
        scaleY: 1,
        scaleX: 1,
        transformOrigin: "center bottom",
        ease: Linear.easeNone
    }, 'jump+=0.6')
    .to('#candleTop', 0.25, {
        attr: {
            ry: 10
        },
        ease: Linear.easeNone
    }, 'jump+=0.6')
    .to('#candle', 0.25, {
        y: 0,
        scaleY: 0.95,
        scaleX: 1.05,
        transformOrigin: "center bottom",
        ease: Linear.easeNone
    }, 'jump+=0.85')
    .to('#candleTop', 0.3, {
        attr: {
            ry: 14.5
        },
        ease: Linear.easeNone
    }, 'jump+=0.85')
    .to('#candle', 0.30, {
        y: 0,
        scaleY: 1,
        scaleX: 1,
        transformOrigin: "center bottom",
        ease: Linear.easeNone
    }, 'jump+=1.15')
    // move brows + eyes up 
    .to('#brows', 0.4, {
        y: -5,
        ease: Power1.easeOut
    }, 'jump')
    .to('#rBrow', 0.15, {
        drawSVG: "100%",
        opacity: 1,
        scale: 1,
        rotation: 0
    }, 'jump+=0.2')
    .to('#lBrow', 0.15, {
        drawSVG: "100%",
        opacity: 1,
        scale: 1,
        rotation: 0
    }, 'jump+=0.2')
    .to('#eyes', 0.4, {
        y: -8,
        ease: Power1.easeOut
    }, 'jump')
    .to('#eyes ellipse', 0.3, {
        attr: {
            ry: 4.5,
            rx: 3
        }
    }, 'jump+=0.3')
    // move brows down + shrink eyes
    .to('#brows', 0.2, {
        y: 5,
        ease: Power1.easeOut
    }, 'jump+=0.4')
    .to('#eyes', 0.2, {
        y: 0,
        ease: Power1.easeOut
    }, 'jump+=0.4')
    .to('#eyes ellipse', 0.2, {
        attr: {
            ry: 3,
            rx: 4.5
        }
    }, 'jump+=0.4')
    // mouth appears
    .fromTo('#mouth', 0.05, {
        drawSVG: "0% 100%",
        opacity: 0
    }, {
        drawSVG: "0% 100%",
        opacity: 1
    }, 'jump+=0.4')
    .to('#eyes ellipse', 0.2, {
        attr: {
            ry: 4,
            rx: 4
        }
    }, 'jump+=0.6')

function no() {
    let tl = new TimelineMax({
        paused: false
    });
    // shake brows + eyes
    tl.to('#brows', 0.25, {
            x: -6,
            ease: Linear.easeNone
        }, 'shakeLeft')
        .to('#mouth', 0.25, {
            x: -6,
            ease: Linear.easeNone
        }, 'shakeLeft')
        .to('#eyes', 0.25, {
            x: -6,
            ease: Linear.easeNone
        }, 'shakeLeft')
        .to('#brows', 0.25, {
            x: 6,
            ease: Linear.easeNone
        }, 'shakeRight')
        .to('#mouth', 0.25, {
            x: 6,
            ease: Linear.easeNone
        }, 'shakeRight')
        .to('#eyes', 0.25, {
            x: 6,
            ease: Linear.easeNone
        }, 'shakeRight')
        .to('#brows', 0.25, {
            x: -6,
            ease: Linear.easeNone
        }, 'shakeLeft2')
        .to('#mouth', 0.25, {
            x: -6,
            ease: Linear.easeNone
        }, 'shakeLeft2')
        .to('#eyes', 0.25, {
            x: -6,
            ease: Linear.easeNone
        }, 'shakeLeft2')
        .to('#brows', 0.25, {
            x: 0,
            ease: Linear.easeNone
        }, 'shakeOut')
        .to('#mouth', 0.25, {
            x: 0,
            ease: Linear.easeNone
        }, 'shakeOut')
        .to('#eyes', 0.25, {
            x: 0,
            ease: Linear.easeNone
        }, 'shakeOut')
        // toggle
        .to('#toggleCircle', 0.25, {
            x: 45,
            ease: Power4.easeInOut
        }, 'shakeLeft')
        .to('#toggleCircle', 0.10, {
            x: 0,
            ease: Power1.easeIn
        }, 'shakeLeft+=0.25')
        // move string
        .to('#candleString', 0.2, {
            rotation: -25,
            transformOrigin: "center bottom"
        }, 'shakeLeft')
        .to('#candleString', 0.2, {
            rotation: 25,
            transformOrigin: "center bottom"
        }, 'shakeRight')
        .to('#candleString', 0.2, {
            rotation: -25,
            transformOrigin: "center bottom"
        }, 'shakeLeft2')
        .to('#candleString', 0.2, {
            rotation: 0,
            transformOrigin: "center bottom"
        }, 'shakeOut')
    return tl;
}

function zoomInOutAlt() {
    let tl = new TimelineMax();
    tl.to("#candleDrawing", 1, {
            attr: {
                viewBox: "0 0 820 590"
            },
            ease: Sine.easeOut
        }, 'active+=0.2')
        .to('#shadow', 1, {
            attr: {
                ry: 40,
                rx: 98
            },
            ease: Sine.easeOut
        }, 'active+=0.1')
        .to('#candleBody', 1, {
            scaleY: 0.99,
            transformOrigin: "center bottom",
            ease: Sine.easeOut
        }, 'active+=0.2')
        .to("#candleGrad", 1, {
            scaleY: 0.99,
            transformOrigin: "center bottom",
            ease: Sine.easeOut
        }, 'active+=0.2')
        .to("#candleTop", 1, {
            attr: {
                ry: 24
            },
            transformOrigin: "center bottom",
            ease: Sine.easeOut
        }, 'active+=0.2')
        .to("#candleDrawing", 1, {
            attr: {
                viewBox: "0 0 800 600"
            },
            ease: Sine.easeOut
        }, 1.4)
        .to('#shadow', 1, {
            attr: {
                ry: 33,
                rx: 98
            },
            ease: Sine.easeOut
        }, 1.3)
        .to('#candleBody', 1, {
            scaleY: 1,
            transformOrigin: "center bottom",
            ease: Sine.easeOut
        }, 1.3)
        .to("#candleGrad", 1, {
            scaleY: 1,
            transformOrigin: "center bottom",
            ease: Sine.easeOut
        }, 1.3)
    return tl;
}

let refuseMasterTl = new TimelineMax({
    paused: true
});
refuseMasterTl.set('#mouth', {
        opacity: 0
    }, 0)
    .add(zoomInOutAlt(), 0)
    .add(refuseTl.play(), 0.5)
    .add(speedLine(), 1.1)
    .add(rightParticles, 1.6)
    .add(leftParticles, 1.6)
    .add(buttonToggle(), 0)
    .add(resetScene(), 1.35)

// Event listener toggle
let toggleContainer = document.querySelector('#toggle')
toggleContainer.addEventListener('click', function() {
    toggleState()
})
let count = 0

编译

CSS

HTML

Animated Candle Toggle with GSAP

svg, candle, switch

编辑器支持Emmet

快捷键

Animated Candle Toggle with GSAP

svg, candle, switch

使用SVG和CSS3构建的健康类APP模板

用GSAP MorphSVG插件实现的逼真的烛火飘摇动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：