基于GSAP实现的一个响应式应景交互动画

An example of responsive choreography with SVG & Greensock 只有当页面滚动，元素位于页面中间位置时，才触发相应的动画。可以作为一个生动的HTML5调查报告模板。

模板

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function sceneOne() {
    var f1 = $("#ineff"),
        largePerc = $(".large"),
        smallPerc = $(".small"),
        circle = $(".circle");

console.log(TweenLite);
    //set starting states
    TweenLite.set(largePerc, {
        visibility: "hidden"
    });
    TweenLite.set(smallPerc, {
        scale: ".7",
        transformOrigin: "50% 50%",
        x: 2
    });

//instantiate a TimelineLite    
    var tl = new TimelineLite();
    tl.add("f1start")
        .from(circle, .5, {
            scale: .4,
            transformOrigin: "50% 50%",
            ease: Back.easeIn.config(1.4)
        }, "fact1")
        .to(smallPerc, 0.25, {
            autoAlpha: 0
        }, "fact1+=.15")
        .to(circle, 0.5, {
            fill: "#e32318"
        }, "fact1+=.25")
        .to(largePerc, 0.5, {
            autoAlpha: 1
        }, "fact1+=.25");

return tl;
}

function sceneTwo() {
    var c1 = $(".circ1"),
        c2 = $(".circ2"),
        c3 = $(".circ3"),
        c4 = $(".circ4"),
        c5 = $(".circ5"),
        c6 = $(".circ6"),
        c7 = $(".circ7"),
        c8 = $(".circ8");

var dur = .4;
    var tl2 = new TimelineLite();

tl2.add("f2start")
        .to(c1, dur, {
            attr: {
                cx: "-=20"
            },
            ease: Back.easeIn.config(1.4)
        }, "split")
        .to(c2, dur, {
            attr: {
                cx: "-=20"
            },
            ease: Back.easeIn.config(1.4)
        }, "split")
        .to(c5, dur, {
            attr: {
                cx: "-=20"
            },
            ease: Back.easeIn.config(1.4)
        }, "split")
        .to(c6, dur, {
            attr: {
                cx: "-=20"
            },
            ease: Back.easeIn.config(1.4)
        }, "split")

.to(c3, dur, {
            attr: {
                cx: "+=20"
            },
            ease: Back.easeIn.config(1.4)
        }, "split")
        .to(c4, dur, {
            attr: {
                cx: "+=20"
            },
            ease: Back.easeIn.config(1.4)
        }, "split")
        .to(c7, dur, {
            attr: {
                cx: "+=20"
            },
            ease: Back.easeIn.config(1.4)
        }, "split")
        .to(c8, dur, {
            attr: {
                cx: "+=20"
            },
            ease: Back.easeIn.config(1.4)
        }, "split")

.delay(.3)
        .to(c1, .9, {
            fill: "#e32318",
            ease: Bounce.easeInOut
        }, "colour")
        .to(c2, .9, {
            fill: "#e32318",
            ease: Bounce.easeInOut
        }, "colour+=.2")
        .to(c5, .9, {
            fill: "#e32318",
            ease: Bounce.easeInOut
        }, "colour+=.4")
        .to(c6, .9, {
            fill: "#e32318",
            ease: Bounce.easeInOut
        }, "colour+=.6");
    return tl2;
}

function sceneThree() {
    var d1 = $(".d1"),
        d2 = $(".d2"),
        d4 = $(".d4p"),
        d5 = $(".d5");

var tl3 = new TimelineLite();
    tl3.add("f3start")
        .to(d4, .75, {
            x: "+=642",
            ease: Back.easeIn.config(1)
        }, "sendOver")
        .to(d5, .75, {
            x: "+=642",
            ease: Back.easeIn.config(1)
        }, "sendOver+=.25")
        .to(d2, .4, {
            y: "+=160",
            ease: Back.easeIn.config(1.4)
        }, "sendOver+=.75")
        .to(d1, .4, {
            y: "+=160",
            ease: Back.easeIn.config(1.4)
        }, "sendOver+=.85");

return tl3;
}

$(document).ready(function() {

//main timilne for animation
    var master = new TimelineLite;
    master.paused(true)
        .add(sceneOne(), "s1")
        .add(sceneTwo(), "s2")
        .add(sceneThree(), "s3");

if ((curTop > fact1Point) && (play1 == "false")) {
                play1 = "true";
            }

if ((curTop > fact2Point) && (play2 == "false")) {
                play2 = "true";
            }

if ((curTop > fact3Point) && (play3 == "false")) {
                play3 = "true";
                $(window).unbind('scroll');
            }

if (play1 == "true") {
                play1 = "done";
                master.play("s1", false)
                    .addPause("s2");
            }

if (play2 == "true") {
                play2 = "done";
                master.play("s2", false)
                    .addPause("s3");
            }

if (play3 == "true") {
                play3 = "done";
                master.play("s3", false);
            }
        });
    }
});

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:300,900);
body {
    font-family: lato, helvetica, arial, "sans-serif";
    background: #f4f6ff;
}
h4 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-bottom: 0;
}
.info {
    text-align: center;
    margin: 1em auto;
}
p {
    font-weight: 300;
    line-height: 1.3;
    margin-top: 0.5em;
}
.facts {
    min-height: 300px;
    max-width: 1440px;
    margin: 10em auto 40em auto;
    z-index: 100;
    position: relative;
    background: #f4f6ff;
}
.facts .arrow-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}
.facts .arrow-cover img {
    margin: 0 auto;
}
.facts h4 {
    text-align: center;
}
.facts p {
    text-align: center;
    line-height: 1.4;
    font-size: 1.2em;
}
.facts .group {
    padding: 0 20px 7%;
    margin: 0 auto;
}
#ineff {
    width: 38%;
    max-width: 250px;
    margin: 0 auto;
    display: block;
}
#half-distressed {
    margin: 0 auto;
    display: block;
    width: 80%;
    max-width: 300px;
}
#decisions {
    margin: 0 auto;
    display: block;
    width: 70%;
    max-width: 300px;
}
.fact1,
.fact2,
.fact3 {
    width: 90%;
    margin: 0 auto 3em auto;
    padding-bottom: 5%;
}
@media screen and (min-width: 550px) {
    .fact1,
    .fact2,
    .fact3 {
        width: 75%;
    }
}
@media screen and (min-width: 800px) {
    .fact1,
    .fact2,
    .fact3 {
        width: 30%;
        float: left;
        margin: 0 1.5%;
    }
    .fact3 {
        margin-right: 0;
    }
}

HTML

<p class="info">[Scroll a tiny bit to trigger the animations]
    <br/>[Resize the browser window down to see the alternate animation choreography.]</p>
<div class="facts">
    <div class="group">
        <div class="fact1">
            <h4>Inefficiencies</h4>
            <p>25% of all of the pension plans in the U.S. are in Pennsylvania, even though only 4% of the U.S. population is in PA.</p>
            <figure>
                <svg id="ineff" " viewBox="0 0 93 93 ">
    <circle class="circle " fill-rule="evenodd " clip-rule="evenodd " fill="#B8C76A " cx="46.5 " cy="46.5 " r="46.5 "/>
    <g class="large "><g><path fill="#FFFFFF " d="M23.3 51.5c0-0.1 0-0.2 0.1-0.3l5.7-6c0.6-0.6 0.8-1.1 0.8-1.8 0-0.8-0.4-1.2-1.1-1.2 -0.7 0-1.2 0.4-1.3 1.7 0 0.1-0.1 0.2-0.3 0.2l-3.8-0.5c-0.1 0-0.2-0.1-0.2-0.3 0.1-3 2.6-5 5.8-5s5.5 2 5.5 4.9c0 1.8-0.7
                3.1-1.9 4.3L29.3 51v0h5.1c0.1 0 0.2 0.1 0.2 0.2v3.5c0 0.1-0.1 0.2-0.2 0.2H23.5c-0.1 0-0.2-0.1-0.2-0.2V51.5z "/><path fill="#FFFFFF " d="M37.3 50.8l3.8-0.5c0.2 0 0.3 0.1 0.3 0.2 0.2 0.5 0.5 0.9 1.2 0.9 0.5 0 0.8-0.2 1-0.7 0.1-0.3 0.1-0.6
                0.1-1.2 0-0.5 0-0.9-0.1-1.2 -0.2-0.5-0.5-0.7-1-0.7 -0.5 0-0.8 0.2-1 0.6 -0.1 0.1-0.2 0.2-0.3 0.2h-3.7c-0.1 0-0.2-0.1-0.2-0.2v-9.4c0-0.1 0.1-0.2 0.2-0.2h10c0.1 0 0.2 0.1 0.2 0.2v3.5c0 0.1-0.1 0.2-0.2 0.2h-6.1c-0.1 0-0.1 0-0.1 0.1V45h0c0.5-0.5
                1.2-1 2.6-1 2 0 3.5 0.8 4.1 2.7 0.2 0.6 0.3 1.4 0.3 2.9 0 0.9-0.1 1.7-0.4 2.4 -0.7 2.2-2.7 3.3-5.4 3.3 -3.4 0-5.4-1.8-5.5-4.2C37.1 51 37.2 50.9 37.3 50.8z "/>
      <path fill="#FFFFFF " d="M51.2 45c-0.1-0.4-0.3-1.1-0.3-2.2 0-1.1 0.1-1.8 0.3-2.2 0.4-1.3 1.6-2.1 3.4-2.1 1.8 0 3 0.8 3.4 2.1 0.1 0.4 0.3 1.1 0.3 2.2 0 1.1-0.1 1.8-0.3 2.2 -0.4 1.3-1.6 2.1-3.4 2.1C52.8 47.1 51.6 46.3 51.2 45zM63.2 38.6c0.1-0.2
                0.2-0.2 0.4-0.2h2.9c0.1 0 0.2 0.1 0.1 0.2L57.1 55c-0.1 0.2-0.2 0.2-0.4 0.2h-2.9c-0.1 0-0.2-0.1-0.1-0.2L63.2 38.6zM55.1 44.5c0-0.2 0.1-0.3 0.1-1.8 0-1.4 0-1.6-0.1-1.8 -0.1-0.2-0.2-0.3-0.5-0.3 -0.2 0-0.4 0.1-0.5 0.3 0 0.2-0.1 0.3-0.1 1.8
                0 1.4 0 1.6 0.1 1.8 0.1 0.2 0.2 0.3 0.5 0.3C54.9 44.8 55 44.8 55.1 44.5zM62 50.9c0-1.1 0.1-1.8 0.3-2.2 0.4-1.3 1.6-2.1 3.4-2.1 1.8 0 3 0.8 3.4 2.1 0.1 0.4 0.3 1.1 0.3 2.2 0 1.1-0.1 1.8-0.3 2.2 -0.4 1.3-1.6 2.1-3.4 2.1 -1.8 0-3-0.8-3.4-2.1C62.1
                52.6 62 52 62 50.9zM65.7 53c0.2 0 0.4-0.1 0.5-0.3 0-0.2 0.1-0.3 0.1-1.8s0-1.6-0.1-1.8c-0.1-0.2-0.2-0.3-0.5-0.3s-0.4 0.1-0.5 0.3c0 0.2-0.1 0.3-0.1 1.8s0 1.6 0.1 1.8C65.3 52.9 65.5 53 65.7 53z "/></g></g>
    <g class="small "><g><path fill="#FFFFFF " d="M27.4 53.4v-3.8c0-0.1 0-0.2 0-0.3l4-9.7c0-0.1 0.1-0.2 0.4-0.2h4.6c0.2 0 0.2 0.1 0.2 0.3l-4.1 9.7v0.1h1.5c0.1 0 0.1 0 0.1-0.1v-2.2c0-0.1 0.1-0.2 0.2-0.2h4c0.1 0 0.2 0.1 0.2 0.2v2.2c0 0.1 0 0.1 0.1 0.1h0.8c0.1
                0 0.2 0.1 0.2 0.2v3.6c0 0.1-0.1 0.2-0.2 0.2h-0.8c-0.1 0-0.1 0-0.1 0.1v1.8c0 0.1-0.1 0.2-0.2 0.2h-4c-0.1 0-0.2-0.1-0.2-0.2v-1.8c0-0.1 0-0.1-0.1-0.1h-6.3C27.5 53.7 27.4 53.6 27.4 53.4z "/><path fill="#FFFFFF " d="M42 45.8c-0.1-0.4-0.3-1.1-0.3-2.2s0.1-1.8
                0.3-2.2c0.4-1.3 1.6-2.1 3.4-2.1s3 0.8 3.4 2.1c0.1 0.4 0.3 1.1 0.3 2.2s-0.1 1.8-0.3 2.2c-0.4 1.3-1.6 2.1-3.4 2.1S42.5 47.1 42 45.8zM54 39.5c0.1-0.2 0.2-0.2 0.4-0.2h2.9c0.1 0 0.2 0.1 0.1 0.2L48 55.9c-0.1 0.2-0.2 0.2-0.4 0.2h-2.9c-0.1 0-0.2-0.1-0.1-0.2L54
                39.5zM45.9 45.4c0-0.2 0.1-0.3 0.1-1.8s0-1.6-0.1-1.8c-0.1-0.2-0.2-0.3-0.5-0.3 -0.2 0-0.4 0.1-0.5 0.3 0 0.2-0.1 0.3-0.1 1.8s0 1.6 0.1 1.8c0.1 0.2 0.2 0.3 0.5 0.3C45.7 45.7 45.9 45.6 45.9 45.4zM52.8 51.7c0-1.1 0.1-1.8 0.3-2.2 0.4-1.3 1.6-2.1
                3.4-2.1s3 0.8 3.4 2.1c0.1 0.4 0.3 1.1 0.3 2.2s-0.1 1.8-0.3 2.2c-0.4 1.3-1.6 2.1-3.4 2.1s-3-0.8-3.4-2.1C53 53.5 52.8 52.9 52.8 51.7zM56.5 53.8c0.2 0 0.4-0.1 0.5-0.3 0-0.2 0.1-0.3 0.1-1.8s0-1.6-0.1-1.8c-0.1-0.2-0.2-0.3-0.5-0.3s-0.4 0.1-0.5
                0.3c0 0.2-0.1 0.3-0.1 1.8s0 1.6 0.1 1.8C56.2 53.7 56.3 53.8 56.5 53.8z "/></g></g>
    </svg>

</figure>
      </div>
      <div class="fact2 ">
        <h4>HALF DISTRESSED</h4>
        <p>Nearly half of local governments in PA offering pensions have distressed plans.</p>
        <figure>
            <svg xmlns="https://www.w3.org/2000/svg " version="1.1 " id="half-distressed " x="0px " y="0px " viewBox="0 0 311 107 " enable-background="new 0 0 311 107 " xml:space="preserve ">
            <circle class="circ1 " fill="#B8C76A " cx="65.7 " cy="28.9 " r="18.5 "/>
            <circle class="circ2 " fill="#B8C76A " cx="127.7 " cy="28.9 " r="18.5 "/>
            <circle class="circ3 " fill="#B8C76A " cx="189.7 " cy="28.9 " r="18.5 "/>
            <circle class="circ4 " fill="#B8C76A " cx="251.7 " cy="28.9 " r="18.5 "/>
            <circle class="circ5 " fill="#B8C76A " cx="65.7 " cy="81.9 " r="18.5 "/>
            <circle class="circ6 " fill="#B8C76A " cx="127.7 " cy="81.9 " r="18.5 "/>
            <circle class="circ7 " fill="#B8C76A " cx="189.7 " cy="81.9 " r="18.5 "/>
            <circle class="circ8 " fill="#B8C76A " cx="251.7 " cy="81.9 " r="18.5 "/>
          </svg>      
    
        </figure>
          </div>
      <div class="fact3 ">
        <h4>Tough Decisions</h4>
        <p>Communities are faced with cutting basic services in order to fund pension promises. </p>
          <figure>
          <svg xmlns="https://www.w3.org/2000/svg " version="1.1 " id="decisions " x="0px " y="0px " viewBox="0 0 1024 768 " enable-background="new 0 0 1024 768 " xml:space="preserve ">
          <path class="d11 " fill="#B0BF5A " d="M771.4 482.4l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0
                0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C770.8 484.2 770.8 483.1 771.4 482.4z "/>
          <path class="d10 " fill="#B0BF5A " d="M901.1 482.4l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0
                0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C900.5 484.2 900.5 483.1 901.1 482.4z "/>
          <path class="d9 " fill="#B0BF5A " d="M4.6 482.4L19 465c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3C18.3 456.2 7 445.1 7 427.9c0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0
                0.9-0.6 1.5-1.5 1.5H33.8c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C4.1 484.2 4.1 483.1 4.6 482.4z "/>
          <path class="d8 " fill="#B0BF5A " d="M134.3 482.4l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5L190 422.8c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0
                0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C133.7 484.2 133.7 483.1 134.3 482.4z "/>
          <path class="d7 " fill="#B0BF5A " d="M264 482.4l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0
                0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C263.4 484.2 263.4 483.1 264 482.4z "/>
          <path class="d6 " fill="#B0BF5A " d="M4.6 315.5L19 298.1c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3C18.3 289.2 7 278.2 7 261c0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4V340c0
                0.9-0.6 1.5-1.5 1.5H33.8c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C4.1 317.2 4.1 316.2 4.6 315.5z "/>
          <path class="d5 " fill="#B0BF5A " d="M134.3 315.5l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5L190 255.9c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4V340c0
                0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C133.7 317.2 133.7 316.2 134.3 315.5z "/>
          <path class="d4p " fill="#B0BF5A " d="M264 315.5l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4V340c0
                0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C263.4 317.2 263.4 316.2 264 315.5z "/>
         <path class="d3 " fill="#B0BF5A " d="M4.6 151L19 133.6c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3C18.3 124.7 7 113.7 7 96.4c0-16 9.4-28.7 25.4-32.5V52.2c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5L60.3 91.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0
                0.9-0.6 1.5-1.5 1.5H33.8c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C4.1 152.7 4.1 151.7 4.6 151z "/>
          <path class="d2 " fill="#B0BF5A " d="M134.3 151l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5V52.2c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5L190 91.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0
                0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C133.7 152.7 133.7 151.7 134.3 151z "/>
          <path class="d1 " fill="#B0BF5A " d="M264 151l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5V52.2c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9
                0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0
                0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C263.4 152.7 263.4 151.7 264 151z "/>
          <g enable-background="new ">
            <path fill="#080808 " d="M5.1 586.2c0-0.4 0.3-0.7 0.7-0.7h19c10.2 0 14.8 4.8 14.8 11.8 0 4.3-2 7.7-5.6 9.6v0.1c3.6 1.4 6.4 5.2 6.4 10.2 0 8.5-6.5 12.6-15.6 12.6h-19c-0.4 0-0.7-0.3-0.7-0.7V586.2zM21.3 602.9c3.2 0 4.7-1 4.7-3.9 0-2.9-1.4-3.9-4.7-3.9h-2.2c-0.3
                0-0.4 0.1-0.4 0.4v6.9c0 0.3 0.1 0.4 0.4 0.4H21.3zM19.2 620.1H22c3.2 0 4.6-1.3 4.6-4.4 0-2.7-1.4-4.3-4.6-4.3h-2.9c-0.3 0-0.4 0.1-0.4 0.4v7.9C18.8 620 18.9 620.1 19.2 620.1z "/>
            <path fill="#080808 " d="M57.5 586.2c0.1-0.4 0.4-0.7 0.8-0.7h13.3c0.5 0 0.7 0.3 0.8 0.7l15 43.1c0.1 0.4-0.1 0.7-0.5 0.7H73.8c-0.5 0-0.7-0.3-0.8-0.7l-1.6-5.8H58.3l-1.6 5.8c-0.1 0.4-0.4 0.7-0.8 0.7H42.5c-0.4 0-0.6-0.3-0.5-0.7L57.5 586.2zM68.2
                612.3L65 600.4h-0.2l-3.4 11.8H68.2z "/>
            <path fill="#080808 " d="M89.2 624.1c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5
                1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C100.2 630.7 92.6 627.6 89.2 624.1z "/>
            <path fill="#080808 " d="M131 586.2c0-0.4 0.3-0.7 0.7-0.7h12.4c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-12.4c-0.4 0-0.7-0.3-0.7-0.7V586.2z "/>
            <path fill="#080808 " d="M149.6 607.7c0-6.3 0.3-8.9 1.4-12 2.3-7.2 8.2-11 16.4-11 8.3 0 14.1 3.8 16.5 10.4 0.2 0.5 0.1 0.7-0.3 0.9l-10.5 4.5c-0.5 0.2-0.8 0.1-1-0.5 -1-2.2-2.2-3.3-4.4-3.3 -1.9 0-3.2 0.8-3.8 2.7 -0.3 1-0.5 2.2-0.5 8.2 0 5.9
                0.2 7.1 0.5 8.2 0.6 1.8 1.9 2.7 3.8 2.7 2.2 0 3.4-1 4.4-3.3 0.2-0.5 0.5-0.7 1-0.5l10.5 4.5c0.5 0.2 0.5 0.5 0.3 0.9 -2.4 6.7-8.2 10.4-16.5 10.4 -8.2 0-14.1-3.7-16.4-11C149.9 616.6 149.6 614 149.6 607.7z "/>
            <path fill="#080808 " d="M202.6 607.7c0-6.3 0.3-8.9 1.4-12 2.3-7.2 8.2-11 16.4-11 8.3 0 14.1 3.8 16.5 10.4 0.2 0.5 0.1 0.7-0.3 0.9l-10.5 4.5c-0.5 0.2-0.8 0.1-1-0.5 -1-2.2-2.2-3.3-4.4-3.3 -1.9 0-3.2 0.8-3.8 2.7 -0.3 1-0.5 2.2-0.5 8.2 0 5.9
                0.2 7.1 0.5 8.2 0.6 1.8 1.9 2.7 3.8 2.7 2.2 0 3.4-1 4.4-3.3 0.2-0.5 0.5-0.7 1-0.5l10.5 4.5c0.5 0.2 0.5 0.5 0.3 0.9 -2.4 6.7-8.2 10.4-16.5 10.4 -8.2 0-14.1-3.7-16.4-11C202.9 616.6 202.6 614 202.6 607.7z "/>
            <path fill="#080808 " d="M240.8 586.2c0-0.4 0.3-0.7 0.7-0.7h12.4c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-12.4c-0.4 0-0.7-0.3-0.7-0.7V586.2z "/>
            <path fill="#080808 " d="M270 629.9c-0.4 0-0.7-0.3-0.7-0.7V598c0-0.3-0.1-0.4-0.4-0.4h-10.5c-0.4 0-0.7-0.3-0.7-0.7v-10.8c0-0.4 0.3-0.7 0.7-0.7h35.5c0.4 0 0.7 0.3 0.7 0.7V597c0 0.4-0.3 0.7-0.7 0.7h-10.5c-0.3 0-0.4 0.1-0.4 0.4v31.2c0 0.4-0.3
                0.7-0.7 0.7H270z "/>
            <path fill="#080808 " d="M309.7 629.9c-0.4 0-0.7-0.3-0.7-0.7v-15.9l-13.8-27.1c-0.2-0.4 0-0.7 0.5-0.7h12.3c0.5 0 0.8 0.2 1.1 0.7l6.8 13.9h0.2l6.6-13.9c0.2-0.5 0.6-0.7 1.1-0.7h12.2c0.5 0 0.7 0.3 0.5 0.7l-13.8 27.1v15.9c0 0.4-0.3 0.7-0.7 0.7H309.7z "/>
          </g>
          <g enable-background="new ">
            <path fill="#080808 " d="M24.2 703.9c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5
                1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C35.3 710.4 27.6 707.4 24.2 703.9z "/>
            <path fill="#080808 " d="M66.1 665.9c0-0.4 0.3-0.7 0.7-0.7h29.7c0.4 0 0.7 0.3 0.7 0.7V676c0 0.4-0.3 0.7-0.7 0.7H80c-0.3 0-0.4 0.1-0.4 0.4v4.3c0 0.3 0.1 0.4 0.4 0.4h13.1c0.4 0 0.7 0.3 0.7 0.7v9.8c0 0.4-0.3 0.7-0.7 0.7H80c-0.3 0-0.4 0.1-0.4
                0.4v4.7c0 0.3 0.1 0.4 0.4 0.4h16.4c0.4 0 0.7 0.3 0.7 0.7V709c0 0.4-0.3 0.7-0.7 0.7H66.7c-0.4 0-0.7-0.3-0.7-0.7V665.9z "/>
            <path fill="#080808 " d="M124.9 709.6c-0.6 0-0.8-0.2-1-0.7l-5.7-13.8h-2.3c-0.3 0-0.4 0.1-0.4 0.4V709c0 0.4-0.3 0.7-0.7 0.7h-12.3c-0.4 0-0.7-0.3-0.7-0.7v-43.1c0-0.4 0.3-0.7 0.7-0.7h18.5c11.4 0 17.1 6.3 17.1 14.9 0 5.4-2.2 9.9-6.7 12.5l7.4
                16.2c0.1 0.3 0 0.7-0.5 0.7H124.9zM124.5 680.4c0-2.3-1.5-3.8-4.4-3.8h-4.1c-0.3 0-0.4 0.1-0.4 0.4v6.8c0 0.3 0.1 0.4 0.4 0.4h4.1C123 684.2 124.5 682.8 124.5 680.4z "/>
            <path fill="#080808 " d="M154.9 709.6c-0.5 0-0.8-0.2-0.9-0.7l-14.2-42.9c-0.1-0.5 0.1-0.8 0.6-0.8h13.2c0.5 0 0.8 0.2 0.9 0.7l6.8 24h0.2l6.5-24c0.1-0.5 0.4-0.7 0.9-0.7h13.1c0.5 0 0.7 0.3 0.6 0.8L168.3 709c-0.1 0.5-0.4 0.7-0.9 0.7H154.9z "/>
            <path fill="#080808 " d="M185.8 665.9c0-0.4 0.3-0.7 0.7-0.7h12.4c0.4 0 0.7 0.3 0.7 0.7V709c0 0.4-0.3 0.7-0.7 0.7h-12.4c-0.4 0-0.7-0.3-0.7-0.7V665.9z "/>
            <path fill="#080808 " d="M204.4 687.5c0-6.3 0.3-8.9 1.4-12 2.3-7.2 8.2-11 16.4-11 8.3 0 14.1 3.8 16.5 10.4 0.2 0.5 0.1 0.7-0.3 0.9l-10.5 4.5c-0.5 0.2-0.8 0.1-1-0.5 -1-2.2-2.2-3.3-4.4-3.3 -1.9 0-3.2 0.8-3.8 2.7 -0.3 1-0.5 2.2-0.5 8.2 0 5.9
                0.2 7.1 0.5 8.2 0.6 1.8 1.9 2.7 3.8 2.7 2.2 0 3.4-1 4.4-3.3 0.2-0.5 0.5-0.7 1-0.5l10.5 4.5c0.5 0.2 0.5 0.5 0.3 0.9 -2.4 6.7-8.2 10.4-16.5 10.4 -8.2 0-14.1-3.7-16.4-11C204.7 696.3 204.4 693.8 204.4 687.5z "/>
            <path fill="#080808 " d="M242.6 665.9c0-0.4 0.3-0.7 0.7-0.7H273c0.4 0 0.7 0.3 0.7 0.7V676c0 0.4-0.3 0.7-0.7 0.7h-16.4c-0.3 0-0.4 0.1-0.4 0.4v4.3c0 0.3 0.1 0.4 0.4 0.4h13.1c0.4 0 0.7 0.3 0.7 0.7v9.8c0 0.4-0.3 0.7-0.7 0.7h-13.1c-0.3 0-0.4
                0.1-0.4 0.4v4.7c0 0.3 0.1 0.4 0.4 0.4H273c0.4 0 0.7 0.3 0.7 0.7V709c0 0.4-0.3 0.7-0.7 0.7h-29.7c-0.4 0-0.7-0.3-0.7-0.7V665.9z "/>
            <path fill="#080808 " d="M276.9 703.9c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5
                1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C287.9 710.4 280.3 707.4 276.9 703.9z "/>
          </g>
          <g id="Pensions " enable-background="new ">
            <path fill="#080808 " d="M725.4 629.9c-0.4 0-0.7-0.3-0.7-0.7v-43.1c0-0.4 0.3-0.7 0.7-0.7h18.3c12.2 0 17.6 6.5 17.6 15.3 0 8.6-5.5 15.3-17.6 15.3h-5c-0.3 0-0.4 0.1-0.4 0.4v12.7c0 0.4-0.3 0.7-0.7 0.7H725.4zM747.6 600.8c0-2.5-1.6-4-4.6-4h-4.2c-0.3
                0-0.4 0.1-0.4 0.4v7.2c0 0.3 0.1 0.4 0.4 0.4h4.2C746 604.8 747.6 603.3 747.6 600.8z "/>
            <path fill="#080808 " d="M765.2 586.2c0-0.4 0.3-0.7 0.7-0.7h29.7c0.4 0 0.7 0.3 0.7 0.7v10.1c0 0.4-0.3 0.7-0.7 0.7h-16.4c-0.3 0-0.4 0.1-0.4 0.4v4.3c0 0.3 0.1 0.4 0.4 0.4h13.1c0.4 0 0.7 0.3 0.7 0.7v9.8c0 0.4-0.3 0.7-0.7 0.7h-13.1c-0.3 0-0.4
                0.1-0.4 0.4v4.7c0 0.3 0.1 0.4 0.4 0.4h16.4c0.4 0 0.7 0.3 0.7 0.7v10.1c0 0.4-0.3 0.7-0.7 0.7h-29.7c-0.4 0-0.7-0.3-0.7-0.7V586.2z "/>
            <path fill="#080808 " d="M801 586.2c0-0.4 0.3-0.7 0.7-0.7h11.7c0.4 0 0.9 0.2 1.1 0.7l10.6 21.9h0.3v-21.9c0-0.4 0.3-0.7 0.7-0.7h11c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-11.7c-0.4 0-0.9-0.2-1.1-0.7l-10.5-21.9h-0.4v21.9c0 0.4-0.3
                0.7-0.7 0.7h-11c-0.4 0-0.7-0.3-0.7-0.7V586.2z "/>
            <path fill="#080808 " d="M841.9 624.1c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5
                1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C852.9 630.7 845.3 627.6 841.9 624.1z "/>
            <path fill="#080808 " d="M883.7 586.2c0-0.4 0.3-0.7 0.7-0.7h12.4c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-12.4c-0.4 0-0.7-0.3-0.7-0.7V586.2z "/>
            <path fill="#080808 " d="M903.6 619.6c-1.2-3.7-1.4-6.4-1.4-11.9 0-5.5 0.2-8.2 1.4-11.9 2.4-7.4 9.2-11 17.2-11s14.7 3.6 17.2 11c1.2 3.7 1.4 6.4 1.4 11.9 0 5.5-0.2 8.2-1.4 11.9 -2.4 7.4-9.2 11-17.2 11S906.1 627.1 903.6 619.6zM925 615.7c0.5-1.4
                0.5-3.3 0.5-8 0-4.7-0.1-6.6-0.5-8 -0.6-1.8-2.2-2.8-4.2-2.8s-3.6 1-4.2 2.8c-0.5 1.4-0.5 3.3-0.5 8 0 4.7 0.1 6.6 0.5 8 0.6 1.8 2.2 2.8 4.2 2.8S924.4 617.5 925 615.7z "/>
            <path fill="#080808 " d="M944.2 586.2c0-0.4 0.3-0.7 0.7-0.7h11.7c0.4 0 0.9 0.2 1.1 0.7l10.6 21.9h0.3v-21.9c0-0.4 0.3-0.7 0.7-0.7h11c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-11.7c-0.4 0-0.9-0.2-1.1-0.7l-10.5-21.9h-0.4v21.9c0 0.4-0.3
                0.7-0.7 0.7h-11c-0.4 0-0.7-0.3-0.7-0.7V586.2z "/>
            <path fill="#080808 " d="M985 624.1c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5 1.9
                16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C996.1 630.7 988.4 627.6 985 624.1z "/>
          </g>
        </svg>
  </figure>

</div>
      
    </div>
    
    <script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

An example of responsive choreography with SVG & Greensock 只有当页面滚动，元素位于页面中间位置时，才触发相应的动画。可以作为一个生动的HTML5调查报告模板。

模板

编辑器支持Emmet

快捷键

An example of responsive choreography with SVG & Greensock 只有当页面滚动，元素位于页面中间位置时，才触发相应的动画。 可以作为一个生动的HTML5调查报告模板。

模板

使用AngularJS实现的响应式设计作品瀑布流布局

使用纯CSS实现的响应式平滑滚动页面布局

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

An example of responsive choreography with SVG & Greensock 只有当页面滚动，元素位于页面中间位置时，才触发相应的动画。可以作为一个生动的HTML5调查报告模板。