Jump to content
Search Community

DrawSVG - animating text

Eugene Rayner test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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/svgxmlns: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;
            <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" />
                    <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
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
" />
                    <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
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
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
c0-0.8-0.1-1.3-0.2-1.7C437.1,125,436.8,124.8,436.5,124.8z" /> </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
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
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
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
c0-0.8-0.1-1.3-0.2-1.7C437.1,214,436.8,213.8,436.5,213.8z" /> </g>
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

Link to comment
Share on other sites

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?: 


  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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...