DrawSVG - animating text

[Eugene Rayner]

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

 

Any help is greatly appreciated.

See the Pen GWMGLq by erayner (@erayner) on CodePen

[GreenSock]

Welcome to the forums! Don't worry, we're all very friendly around here. You'll probably find yourself coming back more and more because it's a nice place to hang out and learn some stuff

 

Anyway, regarding your question, is this what you're looking for?: 

http://codepen.io/GreenSock/pen/da1d1431f299041a20b1b123f3c2a610/

1. You're correct about DrawSVGPlugin not being on the CDN (because then nobody would need to sign up for the club...which is what makes what we do possible). However, we made some special versions of the bonus plugins that can be used for free on codepen anytime (they only work on codepen), and they're listed here: http://codepen.io/GreenSock/full/OPqpRJ/ so you can use those URLs in any of your codepens. We encourage it. 
2. DrawSVGPlugin is only for animating the STROKE of SVG elements, but your numbers were just filled paths (no strokes). So I simply faded them in. 
3. I added a class to each element (in the HTML markup), either "line" or "number" so that it's easy to distinguish them for animation. 
4. I made the numbers start animating about 0.5 seconds before the lines finished by using the "-=0.5" relative position parameter. If you're not sure what that is, this article/video would really help: https://greensock.com/position-parameter

Thanks for being a club member, and happy tweening!