GSAP 向下拖拉滑动页面触发火箭升空动画

Pull Down（Swipe） To Launch 支持鼠标拖拉和移动触摸的滑屏操作。

gsap, swipe

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

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

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);
    },
    dragger,
    alien = select('#alien'),
    countdown = select('#countdown'),
    countdownOutline = select('#countdownOutline'),
    starContainer = select('#starContainer'),
    saturnLogo = select('#saturnLogo'),
    topSpaceIcon = select('#topSpaceIcon'),
    panelSpaceIcon = select('#panelSpaceIcon'),
    topIcons = select('#topIcons'),
    rocketFlame = select('#rocketFlame'),
    rocketSmokeContainer = select('#rocketSmokeContainer'),
    rocket = select('#rocket'),
    moonGroup = select('#moonGroup'),
    dragPanel = select('#dragPanel'),
    dragMaxY = 100,
    moonInitY = 160,
    moonMaxY = 213,
    starsMaxY = 20,
    moonFullY = moonMaxY - moonInitY,
    moonMaxRot = 180,
    countdownDelay = 5,
    saturnMinY = 280,
    saturnMaxY = 258,
    topIconsMaxY = -50,
    starColorsArray = ['#737CB7', '#ededed', '#CB83C6', '#DED7DE', '#EAC0B0']

TweenMax.set('svg', {
    visibility: 'visible'
})
TweenMax.set(moonGroup, {
    x: 145,
    y: moonInitY,
    transformOrigin: '50% 50%'
})

TweenMax.set([topSpaceIcon], {
    transformOrigin: '50% 50%',
    x: 274,
    y: 108,
    scale: 0.75,
    alpha: 0
})

TweenMax.set([saturnLogo], {
    transformOrigin: '50% 50%',
    x: 236,
    y: 82,
    scale: 0.28
})

TweenMax.set([panelSpaceIcon], {
    transformOrigin: '50% 50%',
    x: 386,
    y: saturnMaxY,
    scale: 3.8
})

TweenMax.set(rocketFlame, {
    transformOrigin: '50% 0%'

})

TweenMax.set(countdown, {
    transformOrigin: '50% 50%'

})

dragger = Draggable.create(dragPanel, {
    type: 'y',
    bounds: {
        maxY: dragMaxY,
        minY: 0
    },
    onDrag: onDrag,
    onRelease: onRelease
})

function onDrag() {

var percent = dragPanel._gsTransform.y / dragMaxY;
    var moonDiffY = percent * moonFullY;
    var moonDiffRot = percent * moonMaxRot;
    TweenMax.to(moonGroup, 1, {
        y: moonInitY + moonDiffY,
        rotation: moonDiffRot,
        ease: Elastic.easeOut.config(0.8, 0.6)
    })

var starsDiffY = percent * starsMaxY;
    TweenMax.to(starContainer, 0.5, {
        y: -starsDiffY,
        ease: Elastic.easeOut.config(0.4, 0.6)
    })

var topIconsDiff = percent * topIconsMaxY;

TweenMax.to(topIcons, 0.5, {
        y: topIconsDiff,
        ease: Elastic.easeOut.config(0.4, 0.6)
    })

}

function onRelease() {
    if (dragPanel._gsTransform.y >= dragMaxY) {
        dragger[0].disable();
        launch();

} else {

resetPanel('release');
    }

}

function createRocketSmoke() {
    for (var i = 0; i < 80; i++) {
        var smoke = document.createElementNS(xmlns, 'circle');
        rocketSmokeContainer.appendChild(smoke);

TweenMax.set(smoke, {
            attr: {
                r: 0,
                cx: randomBetween(20, 30),
                cy: randomBetween(40, 70)
            },
            fill: (i % 2) ? '#ededed' : '#FFF'
        })
    }
}

function launch() {
    TweenMax.to(dragPanel, 0.2, {
        y: dragMaxY
    })
    TweenMax.staggerTo('#rocketSmokeContainer circle', 0.21, {
        cycle: {
            attr: function(i) {
                return {
                    r: randomBetween(5, 15)
                }
            }
        },
        repeat: -1,
        yoyo: true
    }, 0.005)

TweenMax.staggerTo('#rocketSmokeContainer circle', 0.1, {
        cycle: {
            attr: function(i) {
                return {
                    cx: randomBetween(-10, 50),
                    cy: '+=30'
                }
            }
        }

}, 0.005)

TweenMax.set(rocketFlame, {
        alpha: 1
    })
    TweenMax.fromTo(rocketFlame, 0.16, {
        scaleY: 0.2
    }, {
        scaleY: 2,
        repeat: countdownDelay * 100,
        ease: RoughEase.ease.config({
            template: Power0.easeNone,
            strength: 1,
            points: 10,
            taper: "none",
            randomize: true,
            clamp: false
        }),
        yoyo: false
    })

TweenMax.to(rocket, 2, {
        y: '+=300',
        delay: countdownDelay - 1,
        ease: Sine.easeIn,
        onStart: killRocketSmoke,
        onComplete: resetUI
    })

TweenMax.to({
        c: countdownDelay
    }, countdownDelay, {
        c: 0,
        ease: SteppedEase.config(countdownDelay),
        onUpdate: function() {
            countdown.textContent = Math.round(this.target.c)
        },
        onComplete: finishCountdown
    })

var countdownTl = new TimelineMax();
    countdownTl.to(countdownOutline, 0.6, {
            attr: {
                r: 17
            },
            fillOpacity: 0,
            strokeWidth: 2,
        })
        .fromTo(countdown, 0.6, {
            scale: 0,
            alpha: 0
        }, {
            scale: 1,
            alpha: 1
        }, '-=0.1')
    countdownTl.timeScale(2.3)

var alienTl = new TimelineMax();
    alienTl.to(alien, 1, {
            y: 3,
            ease: Elastic.easeOut.config(0.7, 0.8),
            delay: 1
        })
        .to('#alienEyePupil', 0.5, {
            x: 2,
            y: 2,
            ease: Elastic.easeOut.config(0.7, 0.4),
            delay: 0.5
        })
        .to('#alienEyePupil', 0.3, {
            x: 0,
            y: 0,
            transformOrigin: '50% 50%',
            ease: Elastic.easeOut.config(0.7, 0.4),
            delay: 0.5
        })

.to('#alienEyePupil', 0.3, {
            scale: 1.6
        })
        .staggerTo('.alienEar', 2, {
            cycle: {
                rotation: [32, -36]
            },
            ease: Elastic.easeOut.config(0.6, 0.6)
        }, 0, '-=0.2')
        .to(alien, 0.6, {
            y: -50
        }, '-=0.2')

}

function finishCountdown() {

var tl = new TimelineMax();
    tl.to(countdownOutline, 0.5, {
            attr: {
                r: 0
            },
            fillOpacity: 1,
            strokeWidth: 10,
            ease: Elastic.easeIn.config(0.8, 0.8)
        })
        .to(countdown, 0.3, {
            alpha: 0
        }, '-=0.5')

}

function killRocketSmoke() {
    //TweenMax.killTweensOf('#rocketSmokeContainer circle');
    TweenMax.staggerTo('#rocketSmokeContainer circle', 0.1, {
        attr: {
            r: 0
        },
        onComplete: removeSmokeParticle,
        onCompleteParams: ["{self}"]

}, 0.005)

}

function removeSmokeParticle(tween) {

rocketSmokeContainer.removeChild(tween.target)
}

function resetPanel(val) {

TweenMax.to(dragPanel, (val == "release") ? 0.2 : 1.2, {
        y: 0,
        ease: (val == "release") ? Sine.easeInOut : Anticipate.easeOut,
        onUpdate: onDrag
    })

}

function resetUI() {

TweenMax.set(alien, {
        y: -50
    })

resetPanel();

dragger[0].enable();

TweenMax.set(rocket, {
        rotation: 180,
        x: 235,
        y: 485,
        scale: 0.8,
        transformOrigin: '50% 50%',
        delay: 1

})
    TweenMax.to([rocketFlame], 0.6, {
        alpha: 0
    })

TweenMax.to('#earL', 0.5, {
        transformOrigin: '0% 0%',
        rotation: 0

})
    TweenMax.to('#earR', 0.5, {
        transformOrigin: '100% 0%',
        rotation: 0

})
    TweenMax.set('#alienEyePupil', {
        scale: 1
    })

createRocketSmoke();

}

function makeStars() {

for (var i = 0; i < 150; i++) {
        var star = document.createElementNS(xmlns, 'circle');
        starContainer.appendChild(star);

TweenMax.set(star, {
            fill: starColorsArray[i % starColorsArray.length],
            alpha: randomBetween(1, 10) / 10,
            attr: {
                r: randomBetween(2, 10) / 10,
                cx: randomBetween(200, 550),
                cy: randomBetween(0, 330)
            }
        })
    }
}

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

makeStars();
resetUI();

编译

CSS

HTML

</g>

</g>
                <g id="burger" stroke="#ededed" stroke-width="2" opacity="1">
                    <line x1="490" x2="510" y1="120" y2="120" />
                    <line x1="490" x2="510" y1="130" y2="130" />
                </g>

</g>
            
        </g>
    </g>
</svg>

Pull Down（Swipe） To Launch 支持鼠标拖拉和移动触摸的滑屏操作。

gsap, swipe

编辑器支持Emmet

快捷键

Pull Down（Swipe） To Launch 支持鼠标拖拉和移动触摸的滑屏操作。

gsap, swipe

GSAP 火箭发射动画

GSAP 字母一个个从下面飞上来的文本动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：