Animating an External SVG and replicating drawSVG animation

[rkeeferCD]

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"/>

      <g>

        <rect class="863b7b84-0b26-47ec-aff5-8da0bba285bb" id="rocketTopSheen" x="14.45" y="23.51" width="17.21" height="1.2"/>

        <g>

          <g>

            <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"/>

          </g>

          <g>

            <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"/>

          </g>

        </g>

      </g>

    </g>

    <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"/>

  </g>

</svg>

 

 

[PointC]

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:

 

http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586

 

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.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.