Jump to content
Search Community

Animating an External SVG and replicating drawSVG animation

rkeeferCD 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

I'm brand new to GreenSock. Just bought the ShockinglyGreen, for if nothing else, the DrawSVGPlugin.


I'm also brand new to SVGs in general. 


I have three line drawings a designer did in Illustrator, and am trying to illustrate the first one, which is a little rocket ship. I've got it in an external rocket.svg file. Will I be able to animate that with the DrawSVGPlugin, or will it have to be inline in the Markup?


If you can in fact, I want to replicate the drawing in of my lines like the DrawSVG green text at the top of http://greensock.com/drawSVG, but having a hard time figuring it out.


This is my rocket SVG. I've added properly named ids, and attempted to add a common class of animate-me to some elements to get started, but struggling on the JS part.


<svg id="rocketSVG" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.87 99.04">

  <g id="outerRocket">
    <g id="innerRocket">
      <path class="863b7b84-0b26-47ec-aff5-8da0bba285bb" id="rocketTopSheen" d="M19.23,20.71l-1.15-.33A53.17,53.17,0,0,1,26.47,3.86L27.4,4.61A51.9,51.9,0,0,0,19.23,20.71Z"/>
        <rect class="863b7b84-0b26-47ec-aff5-8da0bba285bb" id="rocketTopSheen" x="14.45" y="23.51" width="17.21" height="1.2"/>
            <path class="863b7b84-0b26-47ec-aff5-8da0bba285bb" id="rocketFinLeft " d="M0,77V63.38a7.74,7.74,0,0,1,7.73-7.73H12.1v5.43a3.43,3.43,0,0,0,.82,2.24l0.36,0.42ZM7.73,56.85A6.54,6.54,0,0,0,1.2,63.38V74.13L11.67,63.65a4.65,4.65,0,0,1-.77-2.57V56.85H7.73Z"/>
            <path class="863b7b84-0b26-47ec-aff5-8da0bba285bb" id="rocketFinRight" d="M53.87,77L40.59,63.74,41,63.32a3.43,3.43,0,0,0,.82-2.24V55.66h4.37a7.74,7.74,0,0,1,7.73,7.73V77ZM42.2,63.65L52.67,74.13V63.38a6.54,6.54,0,0,0-6.53-6.53H43v4.23A4.64,4.64,0,0,1,42.2,63.65Z"/>
            <path class="863b7b84-0b26-47ec-aff5-8da0bba285bb animate-me" id="rocketFlame" d="M26.93,97.44h-0.6V97c-1-1.59-9-14.1-9-19a9.61,9.61,0,1,1,19.23,0c0,5-8.46,18.5-9.16,19.21l-0.18.18Zm0-27.81A8.43,8.43,0,0,0,18.51,78c0,4.11,6.63,14.86,8.46,17.74C28.82,93,35.35,82.15,35.35,78A8.43,8.43,0,0,0,26.93,69.63Z"/>
            <path class="863b7b84-0b26-47ec-aff5-8da0bba285bb" id="rocketWindow" d="M26.93,49.8a9.61,9.61,0,1,1,9.61-9.61A9.62,9.62,0,0,1,26.93,49.8Zm0-18a8.42,8.42,0,1,0,8.42,8.42A8.43,8.43,0,0,0,26.93,31.77Z"/>
            <path class="863b7b84-0b26-47ec-aff5-8da0bba285bb" id="rocketBooster" d="M36.82,69.69H17a3.7,3.7,0,0,1-3.57-3.82V64l0.78,0.24a2.64,2.64,0,0,0,.8.14H38.8a2.64,2.64,0,0,0,.8-0.14L40.38,64v1.9A3.7,3.7,0,0,1,36.82,69.69ZM14.68,65.53v0.34A2.51,2.51,0,0,0,17,68.49H36.82a2.51,2.51,0,0,0,2.37-2.62V65.53l-0.38,0H15.06Z"/>
            <path class="863b7b84-0b26-47ec-aff5-8da0bba285bb" id="rocketFuselage" d="M38.8,65.55H15.06a4.33,4.33,0,0,1-4.16-4.46V27.29c0-14,15-26.46,15.65-27L26.92,0,27.3,0.29C27.94,0.78,43,12.54,43,27.29v33.8A4.33,4.33,0,0,1,38.8,65.55Zm-11.86-64c-2.33,2-14.85,13.53-14.85,25.74v33.8a3.13,3.13,0,0,0,3,3.27H38.8a3.13,3.13,0,0,0,3-3.27V27.29C41.77,14.39,29.29,3.48,26.94,1.54Z"/>
    <rect class="863b7b84-0b26-47ec-aff5-8da0bba285bb animate-me" id="rocketFlame1" x="38.58" y="82.12" width="1" height="16.92"/>
    <rect class="863b7b84-0b26-47ec-aff5-8da0bba285bb animate-me" id="rocketFlame2" x="43.97" y="78.73" width="1" height="16.35"/>
    <rect class="863b7b84-0b26-47ec-aff5-8da0bba285bb animate-me" id="rocketFlame3" x="14.47" y="82.12" width="1" height="16.92"/>
    <rect class="863b7b84-0b26-47ec-aff5-8da0bba285bb animate-me" id="rocketFlame4" x="9.08" y="78.73" width="1" height="16.35"/>



Link to comment
Share on other sites

Hi rkeeferCD  :)


Welcome to the GreenSock forums and the wonderful world of SVGs.


To answer your first question, yes - you should be able to inject the SVG for animation. We have a few threads talking about that. Blake is our resident expert. Please check out this post:




As for the second part of your question - the DrawSVG plugin animates the stroke, not the fill. From the docs:

  • DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment).


I'm not seeing any strokes in the rocket SVG you've listed above so you'll need to make a few changes to that before DrawSVG will work properly. You can just go back to your original file and add some strokes to the paths and switch some rectangles to stroked lines etc.. After that it should be easy to get you started.


As you get going, we'd need to see your code in action to give you the best help. If you could create a CodePen for us, that would be best. Here's some info on doing that.




Hopefully that helps a bit.


Happy tweening and welcome aboard.


  • Like 4
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...