Hello there, this is my first time posting in the GreenSock forum, please be nice
Essentially, I am trying to animate an SVG pie graph, today is my first day using DrawSVG, and I would really like someone to help me with a starting point
So far I have successfully animated a few layers on the pie graph, but I am now having trouble animating the text. I have converted them to paths in illustrator. I am using tweenmax, timelinemax, drawsvg, and I will be using scrollMagic to trigger the effects.
Here is my SVG code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #FF0000;
stroke-width: 1.9271;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #9A0D12;
stroke-width: 1.9271;
stroke-miterlimit: 10;
}
.st2 {
opacity: 0.22;
fill: none;
stroke: #FFFFFF;
stroke-width: 6;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #FF0000;
stroke-width: 10.599;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st4 {
fill: none;
stroke: #9A0D12;
stroke-width: 10.599;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st5 {
fill: #FFFFFF;
}
</style>
<line class="st0" id="path1" x1="344.9" y1="108.9" x2="439.3" y2="108.9" />
<line class="st1" id="path2" x1="345.3" y1="199" x2="439.8" y2="199" />
<circle class="st2" id="path3" cx="267.3" cy="200" r="115.6" />
<circle class="st2" id="path4" cx="267.3" cy="200" r="77.6" />
<path class="st3" id="path5" d="M267.3,84.4c63.9,0,115.6,51.8,115.6,115.6s-51.8,115.6-115.6,115.6c-22.6,0-43.6-6.5-61.4-17.6" />
<path class="st4" id="path6" d="M267.3,122.4c42.8,0,77.6,34.7,77.6,77.6c0,39.9-30.2,72.8-68.9,77.1" />
<g>
<g>
<path class="st5" d="M404.2,127.9c0.3-0.4,0.6-0.7,0.9-0.8c0.7-0.5,1.5-0.7,2.5-0.7c1.7,0,3,0.7,3.8,2c0.6,1,0.9,2.2,0.9,3.6
c0,1.4-0.3,2.6-0.8,3.6c-0.8,1.7-2.3,2.5-4.4,2.5c-2.1,0-3.5-0.9-4.3-2.6c-0.6-1.2-0.8-3-0.8-5.3c0-7.2,2.1-10.8,6.4-10.8
c0.9,0,1.7,0.1,2.6,0.4v1.6c-1-0.3-1.8-0.5-2.6-0.5c-1,0-1.9,0.4-2.5,1.2c-0.7,0.9-1.1,2.1-1.4,3.7
C404.3,126.4,404.2,127.1,404.2,127.9z M407.2,127.7c-0.8,0-1.5,0.3-2.1,1c-0.7,0.8-1,1.9-1,3.4c0,1.3,0.2,2.3,0.6,3.2
c0.5,1,1.3,1.5,2.3,1.5c1.1,0,1.9-0.5,2.3-1.6c0.4-0.9,0.6-1.9,0.6-3.2c0-1.1-0.2-2.1-0.5-2.9C409,128.2,408.2,127.7,407.2,127.7z
" />
<path class="st5" d="M420.8,119.4c2.3,0,3.8,1,4.6,3.1c0.5,1.3,0.8,3.4,0.8,6.3c0,3.1-0.3,5.4-1,6.7c-0.9,1.8-2.3,2.6-4.4,2.6
c-2.2,0-3.8-1-4.6-3.1c-0.5-1.3-0.8-3.4-0.8-6.4c0-3.1,0.3-5.3,1-6.6c0.4-0.8,1-1.5,1.6-1.9C418.8,119.7,419.7,119.4,420.8,119.4z
M420.8,120.9c-1.3,0-2.2,0.8-2.6,2.5c-0.3,1.1-0.5,2.9-0.5,5.3c0,2.8,0.2,4.8,0.6,5.9c0.5,1.4,1.4,2.1,2.5,2.1
c1.3,0,2.2-0.8,2.7-2.5c0.3-1.1,0.5-2.9,0.5-5.4c0-2.8-0.2-4.7-0.6-5.8C422.8,121.6,422,120.9,420.8,120.9z" />
<path class="st5" d="M430.7,118.8c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9
c-0.9,0-1.5-0.3-1.8-1c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C429.3,119.1,429.9,118.8,430.7,118.8z M430.7,119.4
c-0.4,0-0.6,0.2-0.8,0.7c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.4,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.7-0.2,0.8-0.7
c0.1-0.3,0.2-0.9,0.2-1.6c0-0.8-0.1-1.3-0.2-1.7C431.3,119.5,431.1,119.4,430.7,119.4z M430.7,129.8l4.8-10.8h0.9l-4.8,10.8H430.7
z M436.5,124.2c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9c-0.9,0-1.5-0.3-1.8-1
c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C435.1,124.5,435.6,124.2,436.5,124.2z M436.5,124.8c-0.4,0-0.6,0.2-0.8,0.7
c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.4,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.6-0.2,0.8-0.7c0.1-0.3,0.2-0.9,0.2-1.6
c0-0.8-0.1-1.3-0.2-1.7C437.1,125,436.8,124.8,436.5,124.8z" /> </g>
</g>
<g>
<g>
<path class="st5" d="M408.4,226.8v-4.2h-7.1v-1.4l5.4-12.4h2.1l-5.4,12.3h4.9v-4.5h2.1v4.5h2.1v1.5h-2.1v4.2H408.4z" />
<path class="st5" d="M423.6,218.3c-0.3,0.3-0.5,0.6-0.7,0.7c-0.7,0.6-1.6,0.8-2.7,0.8c-1.7,0-3-0.7-3.8-2
c-0.6-0.9-0.9-2.1-0.9-3.6c0-1.4,0.3-2.5,0.8-3.5c0.8-1.6,2.3-2.5,4.4-2.5c2.1,0,3.5,0.9,4.4,2.6c0.6,1.2,0.8,3,0.8,5.5
c0,2.4-0.2,4.3-0.6,5.8c-0.8,3.2-2.7,4.8-5.9,4.8c-1,0-2.1-0.1-3.1-0.4v-1.6c1.1,0.4,2.1,0.5,3.1,0.5c1.8,0,3-0.9,3.6-2.8
c0.3-0.9,0.4-2,0.5-3.3C423.5,219.3,423.6,218.9,423.6,218.3z M420.7,209.7c-1.1,0-1.9,0.5-2.3,1.5c-0.4,0.8-0.6,1.9-0.6,3
c0,1.1,0.2,2,0.5,2.7c0.5,0.9,1.2,1.4,2.2,1.4c0.8,0,1.5-0.3,2.1-1c0.7-0.8,1-1.8,1-3.2c0-1.2-0.2-2.3-0.6-3.1
C422.5,210.2,421.7,209.7,420.7,209.7z" />
<path class="st5" d="M430.7,207.8c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9
c-0.9,0-1.5-0.3-1.8-1c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C429.3,208.1,429.9,207.8,430.7,207.8z M430.7,208.4
c-0.4,0-0.6,0.2-0.8,0.7c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.3,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.7-0.2,0.8-0.7
c0.1-0.3,0.2-0.9,0.2-1.6c0-0.8-0.1-1.3-0.2-1.7C431.3,208.5,431.1,208.4,430.7,208.4z M430.7,218.8l4.8-10.8h0.9l-4.8,10.8H430.7
z M436.5,213.2c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9c-0.9,0-1.5-0.3-1.8-1
c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C435.1,213.5,435.6,213.2,436.5,213.2z M436.5,213.8c-0.4,0-0.6,0.2-0.8,0.7
c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.3,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.6-0.2,0.8-0.7c0.1-0.3,0.2-0.9,0.2-1.6
c0-0.8-0.1-1.3-0.2-1.7C437.1,214,436.8,213.8,436.5,213.8z" /> </g>
</g>
</svg>
and here is my Javascript
$(document).ready(function () {
//graph svg animation
var shapes = $("line, circle, path")
, tl = new TimelineMax();
tl.from(shapes, 2, {
drawSVG: 0
, delay: 0.5
})
});
I would like the lines to come in second to last, and the numbers to come in very last.
I have tried to create a pen for this project -> but I don't think there is a CDN for drawsvg http://codepen.io/erayner/pen/GWMGLq
Any help is greatly appreciated.
