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>