GSAP 时间线动画控件使用示范

Understanding GSAP's Timeline 使用时间线来组织一连串的动画序列。

gsap, timeline

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

TweenMax.ticker.fps(60);

var $mf = $("#middle-circle #flare"),
    $s1p = $("#scene1 path"),
    $mcc = $("#middle-circle circle"),
    $mcf = $("#middle-circle #flare line"),
    $s3p = $("#scene3 path"),
    $s3c = $("#scene3 circle"),
    $s3r = $("#scene3 rect"),
    $s2l = $("#drawline"),
    $s3fl = $("#scene3-flare line"),
    $alr = $(".allrule"),
    $di1 = $(".dialog1 p"),
    $di2 = $(".dialog2 p"),
    $di3 = $(".dialog3 p"),
    $tri = $("#triangles polygon");

var $a = $("#a"),
    $b = $("#b"),
    $b2 = $("#b_1_"),
    $b3 = $("#b_2_"),
    $b4 = $("#b_3_"),
    $c = $("#c"),
    $d = $("#d"),
    $circ1 = $("#circ-a"),
    $circ2 = $("#circ-b"),
    $circ3 = $("#circ-c"),
    $circ4 = $("#circ-d"),
    $allB = $([$b, $b2, $b3, $b4]),
    $allI = $([$a, $b, $b2, $b3, $b4, $c, $d]),
    $ind = $(".indicator");

TweenMax.set([$a, $b, $b2, $b3, $b4, $c, $d, $mcf, $alr, $di1], {
    opacity: 0
});
TweenMax.set($tri, {
    perspective: 400
});
TweenMax.set($(".dialog, svg"), {
    visibility: "visible"
});
TweenMax.set($("#indicator circle, #indicator ellipse"), {
    css: {
        transformPerspective: 400,
        perspective: 400,
        transformStyle: "preserve-3d"
    }
});
TweenMax.set([$s1p, $s3p, $s3fl, $mcf], {
    drawSVG: '100% 100%'
});
TweenMax.set($circ4, {
    x: 60,
    y: -40,
    scale: 0.9
});
TweenMax.set($s2l, {
    drawSVG: '0% 0%'
});
TweenMax.set($("#circ-a, #circ-b, #circ-c, #circ-d"), {
    opacity: 0
});

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

tl.fromTo($s1p, 1, {
        drawSVG: '100% 100%'
    }, {
        drawSVG: '99% 100%',
        ease: Sine.easeIn
    });
    tl.add("soflare");
    tl.to($s1p, 1, {
            drawSVG: '0% -5%',
            ease: Sine.easeIn
        }, "soflare")
        .staggerFromTo($("#scene1 polygon"), 0.6, {
            opacity: 0,
            scale: 0.3,
            rotation: 90,
            transformOrigin: "50% 50%"
        }, {
            opacity: 1,
            scale: 1,
            rotation: 90,
            transformOrigin: "50% 50%",
            ease: Expo.easeOut
        }, 0.3, "soflare")
        .staggerTo($("#scene1 polygon"), 0.4, {
            opacity: 0,
            scale: 3,
            rotation: 90,
            transformOrigin: "50% 50%",
            ease: Circ.easeOut
        }, 0.08, "soflare+=1.9");

return tl;
}

//midCirc
function midCirc() {
    var tl = new TimelineLite();

tl.add("mid");
    tl.set($mcf, {
        opacity: 0
    });
    tl.staggerFrom($mcc, 0.3, {
            opacity: 0,
            scale: 0,
            transformOrigin: "50% 50%",
            ease: Expo.easeOut
        }, 0.08, "mid")
        .staggerTo($mcc, 0.3, {
            opacity: 1,
            scale: 1,
            transformOrigin: "50% 50%",
            ease: Expo.easeOut
        }, 0.08, "mid")
        .staggerTo($mcc, 0.3, {
            opacity: 0,
            scale: 5,
            transformOrigin: "50% 50%",
            ease: Circ.easeIn
        }, 0.08, "mid+=0.3")
        .fromTo($mcf, 0.6, {
            opacity: 1,
            drawSVG: "0% 20%"
        }, {
            opacity: 0,
            drawSVG: "80% 100%"
        }, "mid+=0.3");

return tl;
}

//scene two
function sceneTwo() {
    var tl = new TimelineLite();

tl.fromTo($s2l, 0.3, {
            drawSVG: '0% 0%'
        }, {
            drawSVG: '0% 8%',
            ease: Sine.easeIn
        })
        .to($s2l, 0.3, {
            drawSVG: '92% 100%',
            ease: Sine.easeIn
        })
        .to($s2l, 0.3, {
            drawSVG: '100% 100%',
            ease: Sine.easeIn
        })
        .staggerFromTo($tri, 0.6, {
            opacity: 0,
            scaleX: 0,
            transformOrigin: "0% 100%"
        }, {
            opacity: 1,
            scaleX: 1,
            transformOrigin: "0% 100%"
        }, 0.08, "-=1")
        .staggerTo($tri, 0.7, {
            opacity: 0,
            scaleX: 0,
            y: -80,
            x: 150,
            transformOrigin: "0% 100%",
            ease: Expo.easeOut
        }, 0.1);

return tl;
}

//scene three
function sceneThree() {
    var tl = new TimelineLite();

tl.fromTo($s3p, 1, {
        drawSVG: '100% 100%'
    }, {
        drawSVG: '99% 100%',
        ease: Sine.easeIn
    });
    tl.add("drawpaths");
    tl.to($s3p, 1, {
            drawSVG: '0% -5%',
            ease: Sine.easeIn
        }, "drawpaths")
        .fromTo($s3c, 0.3, {
            opacity: 0
        }, {
            opacity: 1
        }, "drawpaths")
        .to($s3c, 1, {
            rotationX: -300,
            y: 300,
            x: 300,
            scale: 5,
            opacity: 0,
            ease: Expo.easeOut
        }, "drawpaths+=0.3")
        .staggerFromTo($s3r, 0.1, {
            opacity: 0
        }, {
            opacity: 1,
            ease: Circ.easeOut
        }, 0.1, "drawpaths")
        .staggerTo($s3r, 1, {
            opacity: 0,
            ease: Circ.easeOut
        }, 0.1, "drawpaths+=0.2")
        .fromTo($s3fl, 0.3, {
            drawSVG: '100% 100%'
        }, {
            drawSVG: '80% 100%',
            ease: Sine.easeIn
        }, "drawpaths")
        .to($s3fl, 0.3, {
            drawSVG: '0% 20%',
            ease: Sine.easeIn
        }, "drawpaths+=0.3")
        .to($s3fl, 0.3, {
            drawSVG: '0% 0%',
            ease: Sine.easeIn
        }, "drawpaths+=0.6");

return tl;
}

//second level deep
//first scene
function levelTwoOne() {
    var tl = new TimelineLite();

tl.add(midCirc(), "circOne")
        .add("scene1", "-=1.2")
        .add(sceneOne(), "scene1")
        .add("circTwo", "-=1.5")
        .add(midCirc(), "circTwo")
        .add("scene2", "-=1.5")
        .add(sceneTwo(), "scene2")
        .add("circThree", "-=1.5")
        .add(midCirc(), "circThree")
        .add("scene3", "-=0.5")
        .add(sceneThree(), "scene3")
        .add("circFour", "-=1")
        .add(midCirc(), "circFour")
        .to($di1, 0.3, {
            opacity: 1
        }, "circFour+=1.5")
        .to($di1, 0.3, {
            opacity: 0
        }, "circFour+=4.5");

return tl;
}

//var expandSceneThree = sceneThree();

//second level deep 
//second scene
function levelTwoTwo() {
    var tl = new TimelineLite();

tl.add("circOne");
    tl.add(midCirc(), "circOne")
        .to($circ1, 3, {
            opacity: 1,
            ease: Circ.easeOut
        }, "circOne+=0.2")
        .to($alr, 2, {
            opacity: 1,
            ease: Circ.easeOut
        }, "circOne+=2")
        .to($circ1, 1, {
            css: {
                rotationX: 100,
                scale: 0.3,
                z: -180
            },
            ease: Power2.easeOut
        }, "circOne+=1")
        .to($circ1, 1, {
            x: -164,
            y: 50,
            ease: Power2.easeOut
        }, "circOne+=1")
        .to($b4, 1, {
            opacity: 1,
            ease: Back.easeOut
        }, "circOne+=2")
        .to($circ1, 1, {
            x: -80,
            ease: Power2.easeOut
        }, "circOne+=3")
        .to($b3, 1, {
            opacity: 1,
            ease: Back.easeOut
        }, "circOne+=3.5")
        .to($circ1, 1.25, {
            x: 85,
            ease: Power2.easeOut
        }, "circOne+=4")
        .to($b2, 1, {
            opacity: 1,
            ease: Back.easeOut
        }, "circOne+=4.75")
        .to($circ1, 1.25, {
            x: 226,
            ease: Power2.easeOut
        }, "circOne+=5")
        .to($b, 1, {
            opacity: 1,
            ease: Back.easeOut
        }, "circOne+=5.5")
        .to($circ1, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "circOne+=5.5");
    tl.add("back")
        .to($alr, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "back")
        .to($allI, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "back");

return tl;
}

//third level deep 
//third scene
function levelTwoThree() {
    var tl = new TimelineLite();

tl.add("animTwo");
    tl.add(sceneOne(), "animTwo");
    tl.to($circ2, 3, {
            opacity: 0.2,
            ease: Circ.easeOut
        }, "animTwo+=0.2")
        .to($circ2, 1, {
            css: {
                rotationX: 100,
                rotationY: 50,
                scale: 0.12,
                z: -100
            },
            ease: Power2.easeOut
        }, "animTwo+=3")
        .to($circ2, 1, {
            x: 152,
            y: 174,
            opacity: 1,
            ease: Power2.easeOut
        }, "animTwo+=3")
        .to($alr, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animTwo+=3")
        .to($allB, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animTwo+=3")
        .to($a, 1, {
            opacity: 1,
            ease: Back.easeOut
        }, "animTwo+=3")
        .to($circ2, 0.8, {
            opacity: 0,
            ease: Power2.easeOut
        }, "animTwo+=6");
    tl.add("back")
        .to($alr, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "back")
        .to($allI, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "back");

return tl;
}

//fourth level deep 
//fourth scene
function levelTwoFour() {
    var tl = new TimelineLite();

tl.add("animThree");
    tl.add(sceneTwo(), "animThree");
    tl.to($circ3, 3, {
            opacity: 0.2,
            ease: Circ.easeOut
        }, "animThree")
        .to($circ3, 1, {
            css: {
                rotationX: 105,
                rotationY: -60,
                scale: 0.12,
                z: -100
            },
            ease: Power2.easeOut
        }, "animThree+=1.4")
        .to($circ3, 1, {
            x: -66,
            y: 184,
            opacity: 1,
            ease: Power2.easeOut
        }, "animThree+=1.4")
        .to($c, 1, {
            opacity: 1,
            ease: Back.easeOut
        }, "animThree+=1.3")
        .to($alr, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animThree+=2")
        .to($allB, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animThree+=3")
        .to($a, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animThree+=3")
        .to($circ3, 0.8, {
            opacity: 0,
            ease: Power2.easeOut
        }, "animThree+=4");
    tl.add("back+=1")
        .to($alr, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "back")
        .to($allI, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "back");

return tl;
}

//second level deep 
//fifth scene
function levelTwoFive() {
    var tl = new TimelineLite();

tl.add("animFour");
    tl.add(sceneThree(), "animFour");
    tl.to($circ4, 3, {
            opacity: 0.2,
            ease: Circ.easeOut
        }, "animFour")
        .to($circ4, 1, {
            css: {
                rotationX: 70,
                rotationY: -40,
                scale: 0.09,
                z: -100
            },
            ease: Power2.easeOut
        }, "animFour+=2")
        .to($circ4, 1, {
            x: 165,
            y: 48,
            opacity: 1,
            ease: Power2.easeOut
        }, "animFour+=2")
        .to($d, 1, {
            opacity: 1,
            ease: Back.easeOut
        }, "animFour+=1.9")
        .to($alr, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animFour+=2")
        .to($allB, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animFour+=3")
        .to($a, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animFour+=3")
        .to($c, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animFour+=3")
        .to($circ4, 0.8, {
            opacity: 0,
            ease: Power2.easeOut
        }, "animFour+=5.5");

return tl;
}

//second level deep 
//sixth scene
function levelTwoSix() {
    var tl = new TimelineLite();

tl.add("animFive");
    tl.fromTo($di2, 0.3, {
            opacity: 0
        }, {
            opacity: 1
        }, "animFive")
        .to($di2, 0.3, {
            opacity: 0
        }, "animFive+=2.5")
        .to($a, 1, {
            x: 270,
            ease: Circ.easeOut
        }, "animFive+=3")
        .to($d, 1, {
            x: -270,
            ease: Circ.easeOut
        }, "animFive+=3");
    tl.add("backT+=1")
        .to($alr, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "backT")
        .to($allI, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "backT");

return tl;
}

//second level deep 
//seven scene
function levelTwoSeven() {
    var tl = new TimelineLite();

tl.add(midCirc(), "cOne")
        .add("sce3", "-=1")
        .add(sceneThree(), "sce3")
        .add("cTwo", "-=1.2")
        .add(midCirc(), "cTwo")
        .add("sce2", "-=0.5")
        .add(sceneTwo(), "sce2")
        .add("cThree", "-=0.5")
        .add(midCirc(), "cThree")
        .add("sce", "-=1")
        .add(sceneOne(), "sce")
        .add("cFour", "-=2")
        .add(midCirc(), "cFour");

return tl;
}

//second level deep 
//eighth scene
function levelTwoEight() {
    var tl = new TimelineLite();

tl.add("animEight")
        .to($alr, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animEight")
        .to($allI, 1, {
            opacity: 1,
            ease: Circ.easeIn
        }, "animEight");
    tl.fromTo($di3, 0.3, {
            opacity: 0
        }, {
            opacity: 1
        }, "animEight+=1")
        .to($di3, 0.3, {
            opacity: 0
        }, "animEight+=3");
    tl.add("lessHalf")
    tl.to($c, 1, {
            x: -45,
            ease: Circ.easeOut
        }, "lessHalf")
        .to($b3, 1, {
            x: -35,
            ease: Circ.easeOut
        }, "lessHalf")
        .to($b2, 1, {
            x: -75,
            ease: Circ.easeOut
        }, "lessHalf")
        .to($b, 1, {
            x: -105,
            ease: Circ.easeOut
        }, "lessHalf")
        .to($a, 1, {
            x: 175,
            ease: Circ.easeOut
        }, "lessHalf")
        .to($b4, 1, {
            x: -8,
            ease: Circ.easeOut
        }, "lessHalf")
        .to($d, 1, {
            x: -285,
            ease: Circ.easeOut
        }, "lessHalf");
    tl.add("backC+=1")
        .to($alr, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "backC")
        .to($allI, 1, {
            opacity: 0,
            ease: Circ.easeIn
        }, "backC");

return tl;
}

//second level deep 
//seven Nine
function levelTwoNine() {
    var tl = new TimelineLite();

tl.timeScale(1.8);

return tl;
}

//master.seek("twoEight");

编译

CSS

html,
body,
#container {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
}
svg {
    margin: 0 auto;
    display: table;
    width: 800px;
    height: 350px;
}
html {
    background: #638db7;
}
.dialog {
    width: 400px;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -200px;
}
.dialog,
svg {
    visibility: hidden;
}
p {
    font-size: 30px;
    font-family: 'Muli', sans-serif;
    text-align: center;
    color: #a1c3e5;
}
p a {
    color: #bcd7f2;
    transition: 0.75 color ease;
    text-decoration: none;
}
p a:hover {
    color: #fff;
    transition: 0.5 color ease;
}
.mt {
    margin-top: 120px;
}
.allrule,
.indicator,
.movement {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -400px;
}
@media (max-width: 700px) {
    container {
        width: 100%;
    }
    svg {
        width: 100% !important;
        height: auto !important;
    }
    .allrule,
    .indicator,
    .movement {
        top: 0;
        left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    p {
        font-size: 15px;
    }
}

HTML

<div class="dialog dialog1">
        <p class="first">Current Position on GSAP's Timeline</p>
    </div>

<div class="dialog dialog2">
        <p class="mt">Adjust the Timing of Your Animations</p>
    </div>

<div class="dialog dialog3">
        <p class="mt">Tween your tweens
            <br> tl.timeScale(1.8);
        </p>
    </div>

<div class="dialog dialog4">
        <p>The GSAP Timeline makes animation a breeze!</p>
    </div>

<div class="dialog dialog5">
        <p><a href="//techbrood.com/q?=tweenmax">Search 'tweenmax' or 'gsap' on techbrood</a> for more demos</p>
    </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script>
<script src='/uploads/150501/DrawSVGPlugin.js?r=5'></script>

Understanding GSAP's Timeline 使用时间线来组织一连串的动画序列。

gsap, timeline

编辑器支持Emmet

快捷键

Understanding GSAP's Timeline 使用时间线来组织一连串的动画序列。

gsap, timeline

使用GSAP实现的3D走马灯品牌图文展示动画

GSAP 浮动的球演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：