Two.js SVG & Animation

Using two.js to display an SVG exported from Illustrator and then add some simple animation.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/two.js/0.2.0/two.min.js"></script>
<div id="assets">
<svg width="950px" height="290px" viewBox="0 0 950 290" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
            <g id="Visla-Copy-4aa" transform="translate(-275.000000, -355.000000)" stroke-width="10">
                <g id="VISLA" transform="translate(280.000000, 360.000000)">
                    <path d="M0,40 L20,240.498753 C29,241.167082 42.3333333,241.167082 60,240.498753 C86.5,239.496259 103.746094,232.859633 124.582031,202.815802 C138.472656,182.786582 156.945312,128.514648 180,40" id="v" stroke="#979797"></path>
                    <path d="M260,40 L260,220" id="i" stroke="#979797"></path>
                    <path d="M340,120 C340,113.934241 340,107.281137 340,100.040689 C340,89.1800163 340,68.1057902 353,54.1342722 C366,40.1627542 380.949219,40.4882625 400,40.1627542 C412.700521,39.9457486 432.700521,39.9457486 460,40.1627542" id="Path-5" stroke="#979797"></path>
                    <path d="M400,240 C400,234.666667 400,228 400,220 C400,208 400,186 413,173 C426,160 440,160 460,160 C473.333333,160 493.333333,160 520,160" id="Path-5" stroke="#979797" transform="translate(460.000000, 200.000000) scale(-1, -1) translate(-460.000000, -200.000000) "></path>
                    <path d="M560,0 L300,280" id="Path-4" stroke="#FF4B4B"></path>
                    <path d="M600,240 C600,167.321058 600,127.357266 600,120.108626 C600,109.235664 600,88.1375924 614,74.1502653 C628,60.1629383 640.949219,60.4888149 660,60.1629383 C672.700521,59.9456872 692.700521,59.9456872 720,60.1629383" id="l" stroke="#979797" transform="translate(660.000000, 150.000000) scale(1, -1) translate(-660.000000, -150.000000) "></path>
                    <path d="M780,39 L780,239.498753 C786.666667,240.167082 800,240.167082...

CSS

#assets {
    display: none;
}

JavaScript

var two = new Two().appendTo(document.body);
var el = $('#assets svg')[0];
var shape = two.interpret(el).center();

two.bind('update', function(frameCount) {
    if (keys.length > 0) {
        if (child.opacity > 0.999) {
            keys.shift();
            child = shape.children[keys[0]];
        }
        if (child) child.opacity += 0.1;
        
    }
    else if (shape.scale > 0) {
        shape.scale -= 0.01;
    }
    else {
        shape.opacity= 0;
        shape.scale = 1;
        keys = Object.keys(shape.children);
        child = shape.children[keys[0]];
    }
}).play();