3

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 ;)

ohmmho
  • 132
  • 2
  • 13

2 Answers2

1

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

ohmmho
  • 132
  • 2
  • 13
1

You can only draw in objects with a stroke.
In your svg only these classed elements have a stroke:

.st1{fill:none;stroke:#666666;stroke-miterlimit:10;}

.st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}

You also need to offset this stroke with css:

style="stroke-dasharray:2000;stroke-dashoffset:2000"

And try these attribute values- you can use any of the Skrollr options: (you are either moving the line from a value off set to 0, or from 0 to an offset (to draw out an object)

data-top="stroke-dashoffset:0;" data-center-top="stroke-dashoffset:2000;"

Jordan Lafland
  • 11
  • 1
  • thanks Jordan, you are right: the elements need to have an stroke and they need to be **paths** not shapes in order to have an stroke and fill it. – ohmmho Apr 21 '16 at 09:25