I'm trying to draw a simple svg as the user scrolls down on the viewport. I'm using skrollr because it's meant to be simple, but I can not make it work.
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1610.2 1604.6" style="enable-background:new 0 0 1610.2 1604.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1D1D1D;}
.st1{fill:none;stroke:#666666;stroke-miterlimit:10;}
.st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}
.st3{fill:#666666;}
.st4{fill:url(#SVGID_1_);stroke:#666666;stroke-miterlimit:10;}
.st5{fill:#161616;stroke:#666666;stroke-miterlimit:10;}
.st6{fill:url(#SVGID_2_);stroke:#666666;stroke-miterlimit:10;}
.st7{fill:#F7F7F7;}
</style>
<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" x="-397.1" y="-1042.5" class="" width="447.4" height="295"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st1" x1="-400" y1="-988.5" x2="-86" y2="-988.5"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st1" x1="-7" y1="-989" x2="50.3" y2="-988.5"/>
<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" x="-74.5" y="-1016.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 685.2816 -322.584)" class="st2" width="55.5" height="55.5"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-46.8-1025.2L-46.8-1025.2c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-44.2-1026.3-45.3-1025.2-46.8-1025.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class=" st3" d="M-46.8-946.9L-46.8-946.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-44.2-948-45.3-946.9-46.8-946.9z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-7.7-985.9L-7.7-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-5.1-987.1-6.3-985.9-7.7-985.9z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M50.3-986.2L50.3-986.2c-1.2,0-2.2-1-2.2-2.2l0,0c0-1.2,1-2.2,2.2-2.2h0c1.2,0,2.2,1,2.2,2.2l0,0
C52.6-987.3,51.6-986.2,50.3-986.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-86-985.9L-86-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6l0,0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-83.4-987.1-84.6-985.9-86-985.9z"/>
<linearGradient data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="885.6667" y1="-1039.5" x2="885.6667" y2="-410.7027">
<stop offset="0" style="stop-color:#212121"/>
<stop offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st4" points="50.3,-1042.5 50.3,-378.5 1721,-1040.5 "/>
<polygon class="st5" points="1721,-1040.5 2302.9,-1040.5 1564.7,-747.5 981.6,-747.5 "/>
<linearGradient id="SVGID_2_" data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" gradientUnits="userSpaceOnUse" x1="1564.6666" y1="-894" x2="2302.9167" y2="-894">
<stop offset="0" style="stop-color:#212121"/>
<stop offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st6" points="2302.9,-747.5 2302.9,-1040.5 1564.7,-747.5 "/>
<rect x="393" y="-926.5" class="st7" width="593" height="434"/>
<g data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" >
<polyline class="st1" points="2.5,0 2.5,162 43.2,162 43.2,30 748.7,30 748.7,162 916.7,162 1516.8,162 1607.7,162 1607.7,911.1
1512.8,911.1 1512.8,778.1 815.8,778.1 815.8,912.1 641.7,912.1 293.8,912.1 293.8,1264.1 293.8,1597.1 343.3,1597.1 343.3,1462.1
1040.8,1462.1 1040.8,1602.1 1108.2,1602.1 "/>
<circle class="st3" cx="2.5" cy="162" r="2.5"/>
<circle class="st3" cx="43.2" cy="162" r="2.5"/>
<circle class="st3" cx="748.7" cy="162" r="2.5"/>
<circle class="st3" cx="1512.9" cy="778.1" r="2.5"/>
<circle class="st3" cx="1512.8" cy="911" r="2.5"/>
<circle class="st3" cx="1607.7" cy="911" r="2.5"/>
<circle class="st3" cx="815.8" cy="778.4" r="2.5"/>
<circle class="st3" cx="815.7" cy="912.1" r="2.5"/>
<circle class="st3" cx="293.8" cy="1597" r="2.5"/>
<circle class="st3" cx="343.5" cy="1597" r="2.5"/>
<circle class="st3" cx="343.2" cy="1462.2" r="2.5"/>
<circle class="st3" cx="1040.8" cy="1462" r="2.5"/>
<circle class="st3" cx="1040.7" cy="1602.1" r="2.5"/>
</g>
</svg>
Here is a pen to my code: http://codepen.io/ohmmho/pen/zqjbRW
May be I'm setting the data-end/start points to the wrong elements? There are elements like 'line' and 'rect' that confuse me, I'm learning SVG animations. Some light on this would be appreciated.
Thanks ;)
Finally, after a further research, I found out what I was doing wrong: Those shape elements like circle or polygon need to be paths in order to accomplish what I'm trying. You can export your svg file from Illustrator properly or convert them with some tools, more info on this here.
My codepen works now :D