How to make short animation for TikTok: 9VAe

9 min readSep 9, 2020

This article shows how to make a short animation using 9VAe for iPhone/iPad. It takes about 5 minutes to complete the process. You can also use the PC version of 9VAe and the Android version of 9VAe.

To learn how to make other animations, click here.

Download 9VAe

iPhone / iPad : 9VAeDangla (Apple)、9VAePro(Apple)
Android : 9VAe for Android (Google Play)
Amazon Fire : 9VAe (Amazon)
Windows / Mac / Linux: 9vae for PC

In the following instructions, operate in the order of ABCD in the figure.

1. Press “1.” to start creating a stroke order animation.

If the background of the 9VAe is black, change the background to white by going to the “View Menu” and selecting “Dark Mode”. We will explain here with a white background.
Touch the “1.” (B below) on the right side of the “+”. In the case of the iPhone version of 9VAe, touch the bottom of the palette (A below) and the palette will disappear and you can touch the “1.”(B below).

3. If you touch “1.” without any input, “How to make Stroke Order Animation, Draw figures. Click this button again.” will be displayed. Press “OK”. The “Stroke Order Animation” mode is activated.

4. If “How to make Stroke Order Animation” doesn’t appear, touch “New” in the “File Menu” and then touch “1.” again.

2. Draw figures

Write your favorite letters and pictures on the screen. When you finish writing, touch “1.” again. (In the case of the iPhone version, touch the bottom right corner (C above) twice to see “1.”
Touch the “1.” button, a stroke order animation will be created and played once.

Now that we have a video, let’s add some more color and movement to it.

3. Line color , display magnification

Drag the screen from the top left to the bottom right to select all the lines you have drawn (D below) and touch the line color palette (E below). Choose a color from the palette. The palette to the right of the line color is, in order, “Line Width”, “Line Type (blur on/off, etc.)”, and “Arrow/thickness changing lines”. Try it by touching them.
You can zoom in and out by pressing the “+” and “-” buttons on the left and right side of the magnifying glass in the lower left corner of the screen (F below). You can return to the original size by pressing the magnifying glass.

4. Add Next Page, select lines and Fill in behind figures

Touch the “+” (G above) on the right side of the page. Execute “Add Next Page” from the menu, and the first page will be copied to the second page.

2. Drag the screen to select the heart (Figure H above) and touch the “+” in the center of the selection frame (Figure H above). Execute “Fill in behind figures” from the menu. (Added in version 0.7.4. If this item is not there, get the latest version of 9VAe, or touch the point selection button, select points, and then touch the “+” menu “Insert a shape behind points”) Now, a no edge shape will be added behind , and you will be in add points mode.

5. Adding points, changing the shape of curve

Touch the area where the color of the background shape overhangs (Figure I above) and add points to change the fill area.
You may add points by enlarging the screen using the magnification button in the lower left corner (Figure J above).

3. To change the added point (K above) to sharp , touch the “^” button in the upper right corner of the palette (L above).

4. To change the fill color, touch the Fill Color palette (M above) to select a color. To the right is the Gradient Palette where you can add a gradient to the fill color.

6. Copy the filled color to shape the previous page and resize it

Let’s add some movement to the color shape you filled in. Touch the Copy to Previous Page button (N above); the shape on page 2 will be copied onto page 1.

2. Reduce the size of the selection frame by dragging the corner handle (O above). Move it by dragging the “+” in the center (P above). The shape will seem to spring out from there.

3. To adjust the timing of the movement, touch the register button (Q above) to register the shape.

4. Touch the registered button (R above) and execute “Slow Start Time Curve” from the menu.

７. Edit Time Curve

As shown below, a time curve graph appears in the lower left corner. The meaning of the time curve graph is that the horizontal axis is the time and the vertical axis is the change until the next page. If the blue line is at the bottom, it is the state of the current page, and if it is at the top, it is the state of the next page.

2. Move the point in the center of the graph (S above) down and touch the right side of the graph (T above) to add a point and move it to the outside of the graph (T below). Let’s see the animation with the play button (U below).

3. You can change the shape of the point to a curve using the button in the upper right corner of the palette (V above). The movement will change smoothly.

8. Add a new stroke order animation on page 2

You can create a stroke order animation for just one page with the “1.” button, but how do you create it for page 2 ? let’s touch page 2 (W above) to go to page 2 and add it here.

2. First, drag the screen to select the whole shapes, and then drag the corner handles (X above) inwards to create a margin around the selection.

3. Touch the empty area (Y above) to deselect, and then touch the color of the line (Z above) to select a new color to add. (If you choose a color without deselecting, the color of the selected shape will change. In this case, the color is orange.)

4. Then touch the button to draw a line (see above, a) and add strokes around (see below)

5. When you have finished writing, touch the draw button again (a above). Now all the last lines of the same color are selected. (This function was added in Ver.0.7.4. If you don’t have this function, you can select the lines one by one by pressing the Shift button at the bottom left.)

6. Touch the “Stroke Order” from the “Object Menu”. Now you can create an animation in which the added lines are displayed in order. Try playing the animation by touching the play button.

9.9VAe Mechanism

Here’s a summary of the 9VAe’s features so far

9VAe can be animated by adding the “stroke order” attribute to the shapes you write, and you can draw them in order. The “1.” button makes it easy to do so.
9VAe smoothly interpolates the attributes (color, shape, line thickness, transparency …) of the copied shapes between pages.
To copy, click on the “+” button on the right side of the page to “Add Next Page”, or select a shape and press the button

to copy to the previous or following pages.

4. You can group the shapes in the registration palette by pressing the button

You can add a time curve graph to adjust the timing of the animation.

5. The interpolation, registration and time curve graphs work the same way for lines, illustrations, photos and text. Once you understand how this works, it will be easier to create all kinds of animation.

10. Make video (MP4 export)

Go to “File Menu > Save As” and save the animation.
If you have an iPhone/iPad version or a Mac version of 9VAe, you can directly output an MP4 video by going to “File Menu > Movie export”. For other 9VAe, you can use “File Menu > Animated GIF export” to create an animated GIF, and then convert it to an MP4 video at ezgif.com.
When creating the video material, the screen size should be blank for width, 720 for height and 30 for frames per second. Click “OK” button to export MP4 or animated GIF.
In the smartphone version, the movie is saved in the “9VAe folder” or “Camera Roll”. In the PC version, you choose the place to save the file first.

Make Video (MP4 from Animated GIF)

For Windows/Linux/Android/Amazon Fire, you can convert GIFs to MP4 videos with the online GIF to MP4 Video converter — Ezgif.com
For Windows/Linux, you can use APNG to MP4 Video converter — Ezgif.com to convert APNG to MP4 video. It takes a while, but it’s better than GIF.

Creating an MP4 Video on ezgif.com

See Online GIF to MP4 Video converter. or APNG to MP4 Video converter — Ezgif.com
Select an animated GIF or APNG file (background not transparent)
Click on “Upload!” > Click on “Convert GIF to MP4!”
Click on “Save” (floppy disk icon) or long press on MP4 to download the MP4.
The MP4 will be downloaded to your Download folder. (Depending on your browser settings)

11. Post a video to TikTok

TikTok is a service for smartphone, so you can post the MP4 from the smartphone app.

Launch the TikTok app.

2. Touch the “+” button at the bottom of the screen.

3. Touch the “Upload” button below.

4. Select the video you’ve created (the iPhone version starts with a blank screen, so touch the white one to play it) (for the Android version, select from the download folder you got MP4 from ezgif.com)