Let's take off today with an animated rocket that you can use as an illustration, logo, icon, loader, or at any other project. In this article, we will show you how to create the perfect animated rocket ship in SVGator.

By SVGator

What you will learn:

  • How to set up keyframes on the timeline in SVGator
  • How to create a morphing effect
  • How to use the easing settings for smooth animation effects
  • How to export your animated rocket ship for the web and for mobile apps
  • How to make your animation load on mouse over

Taking off... 🚀

All you have to do is download the rocket SVG file provided and follow the steps below. If you’d prefer to create your own rocket launch animation, you can also draw your own visuals from scratch in SVGator.

Step 1. Moving the rocket SVG

Import the rocket ship SVG to SVGator. Select the Rocket group, click on the Animate button, and choose Position. This will add a position keyframe to the beginning of the timeline.

Animated rocket tutorial

Move the playhead to 0.8 seconds, and move the rocket slightly upward. You can use the arrow keys: holding down Shift while pressing the arrow keys will move the rocket ten units instead of one.

animated rocket ship design

Move the playhead to 1.6 seconds, right-click the first keyframe, and choose duplicate (Ctrl+D).

Rocket SVG animation tutorial

Press the gear icon to open the Animation Settings panel and change the timeline duration to 1.6 seconds, to match the animation.

animated roscket svg tutorial

Preview your rocket animation by pressing Space on the keyboard or the Play button next to the time indicator. To make the animation look more natural and smooth, let’s add easing.

Select all the keyframes, open the Easing panel, and choose Ease In Out.

animated rocket svg tutorial how to

Step 2. Animating the flame

We will use the Morph animator to animate the flames. The good thing is that we can animate both at the same time. We’ll also enable the grid to keep things symmetrical.

First, enable the Front Grid and Snap to Grid.

how to make an animated rocket

Next, make sure the playhead is at the beginning of the timeline, and disable the Position animator temporarily by clicking on the lightbulb icon. This will make animation easier.

How to create a rocket animation SVGator

With the Node tool (A) active, select the two flame paths in the stage, press animate, and choose Morph.

animated rocket tutorial step by step

Move the playhead forward two units, and change the shape of the flame by moving the nodes and handles. The grid will help to match the two sides.

rocket launch svg animation

Move the playhead forward again, select the first keyframes from both paths, and duplicate them by pressing Ctrl/Cmd+D.

rocket launch svg animation

Select all three Morph keyframes on both paths, and duplicate them three more times to fill the timeline.

rocket svg animation tutorial

If you want, you can change the flame paths in the middle keyframes to add more variety to the flame animation, but make sure the first and last frames are exactly the same so that the final animation can loop seamlessly.

Re-enable the position animator we added in the previous step, and preview your animation.

Step 3. Animating speedlines

We’ll start with adding some speed-lines. You can disable Snap to Grid and Front Grid for this part. All of the stars and speedlines will use the same animation with slight variations.

Choose the Line tool (L) from the Shapes panel, and draw a vertical line on the top part of the stage next to the rocket.

animated rocket svg

In the Appearance section of the right panel, change the line thickness to 6 px and the Line ends to Round.

animated rocket tutorial step by step

Make the stroke the same color as the stars. Click on the Color picker tool next to the stroke color, and sample one of the stars.

animated rocket tutorial

Add a position animator, move the playhead four units forward, and then move the line to the bottom of the stage. Hold down Shift while dragging, to constrain it to a straight vertical line.

animated rocket tutorial SVGator

Move the playhead to 0.1 seconds, and add an opacity animator.

animated rocket tutorial svg

After moving the playhead two units forward, press the Add keyframe button next to the Opacity animator. This will be the part where the speedline will be visible.

animated rocket ship tutorial

At the starting position and end position, change the Opacity to 0% in the right panel.

how to make an svg animation rocket ship

To make another speed line on the other side, copy and paste the line in the elements panel. The animation will also be copied along with the element.

The line needs to be moved to the other side of the rocket, but if you drag it directly, notice that your position animator is affected.

To move the line without affecting the Position animation on it, shift+drag one of the points of the motion path, and this will move the motion path along with the element.

how to create an svg animated rocket

Select all keyframes and drag them forwardtep to offset the animation in time.

rocket ship svg

Step 4. Looping the stars

The stars will use the exact same animation as the speedlines, but the animation will have to be split to make them loop seamlessly.

If you paste the animation directly to the stars, their position will change, so let’s start with copying all the stars to keep the originals as guides.

Copy the keyframes of one of the speedlines, then add a position animator to the four-pointed star and press Ctrl+V to paste.

Add a new position keyframe right in the middle, as shown below. This is where the animation will actually start.

free rocket ship svg tutorial

Select and copy the first couple of keyframes, and paste them to the end of the timeline. Delete the first keyframes and move the rest to the start. Your timeline should look like this:

rocket launch svg animation tutorial

Shift+drag a point on the motion path to reposition it based on the original star.

create a rocket launch svg animation step by step

Do the same for the round stars, but instead of splitting the position animation in the middle, add a new position keyframe exactly above or a little after the opacity keyframe, as they are higher up in the starting position.

Move them exactly where you need them with shift+drag, then you can delete the stars you used as a reference.

rocket animation svg tutorial

Preview the animation in the Export window to make sure everything is looping properly.

rocket animation svg tutorial SVGator

When the animated rocket is ready, you can select the rocket group and save it to the library to use in later projects.

animated rocket save to library

Step 5. Export

Congrats, your animated rocket is ready to launch! All that you have to do now is to export your work. Click on the blue Export button on the top right corner, and the Export options window will pop up.

The rocket SVG animation can be exported for web and mobile. Below you can find a short guide that helps you with export settings, depending on your project.

rocket animation

Export to web

Under the File section, you can rename your SVG and choose to export a static version. By default, the exported ID-s of the elements are random unique letter sequences. You can choose to export ID-s based on element names if you are working with developers to make finding everything in the code a lot easier. The ID-s will still remain unique.

Let’s also add some interactivity. Leave the animation type on Javascript. From the Animation start dropdown, choose On mouse over. From the On mouse out dropdown, choose reset.

animated rocket export web animation

Set iterations to infinite, and adjust the speed if needed. We set the speed to 140% in this example. Before exporting, if you have a canvas color set, make sure to leave the Include in Export option unchecked.

Move your mouse over the rocket

Export to mobile

The main difference in the mobile export tab is that in the File section you can choose to export your rocket SVG animation to two of the most popular frameworks: React Native and Flutter.

animated rocket export mobile animation

Visit our help center to learn more about mobile export. Here you will also find some handy information on how to install webview for your project on these frameworks.

👉 Export React Native animations
👉 Export Flutter animations

When you’re done, don’t forget to show off your work and tag us on social media. We can’t wait to see your rocket blast off!