Stick figure animation exercise

Version 1.0

Introduction

Creating a simple animation with a stick figure can demonstrate fundamental principles of animation, including:

This exercise requires a smartphone, or even better, a tablet like an iPad if you have one.

Exercise

Install apps

  1. Install Slack on your phone (if necessary)
  2. Install Stick Nodes on your phone (free version)

    3. ⚠ī¸ Steer clear of "download tutorials" ads on the website and wait for nagware ads to finish when you load the app on your phone.

    🎩 Consider allowing access to all photos (see below).

Open Stick Nodes and adjust your stick figure

  1. Click OK to bypass recent updates list
  2. Move the nodes into an initial posture (eg, sitting down)

    3. 🎩 Start by positioning the waist (black node), then branch out one node at a time to set the limbs and head.

    🎩 If you have trouble selecting a node, pinch the stage to zoom in.

Stick Nodes Exercise 1

Add frames

  1. Click the phone icon with the tiny + at upper right to add a new frame
  2. Select the new frame to the right, and move your figure (eg, angling the torso as though the figure is getting up)

    3. 🎩 Use small changes between frames.

    🎩 Use techniques like squash, stretch, and anticipation to motivate the movement.

    🎩 Add easing--overshooting and then coming back--to make motion seem more natural.

Stick Nodes Exercise 2 Stick Nodes Exercise 4

Add tweened frames

  1. Select a frame at the beginning of motion and tap "Add tweened frame."

    2. 🎩 Add more tweens any time you want to slow the animation.

Stick Nodes Exercise 3

Adjust the animation

  1. Click play, with:
  2. Looping on
  3. Tweening on (to smooth the animation before export)

    4. 🎩 To add a pause at the beginning and end of your animation, just copy a key frame without altering it.

Stick Nodes Exercise 6
Stick Figure Jump No Tween Demo

Without automatic tweening

Stick Figure Jump Tween Demo

With automatic tweening

Save project for future editing

  1. Inside the stage, click the tiny "Quick Menu" at upper left and choose "App Tools"
  2. Tap the "Save" button, giving your project a name like "stick_nodes_demo"

    3. ⚠ī¸ It can be challenging to tap the tiny text in this app, particularly the "Quick Menu."

Stick Nodes Exercise 5

Option A: Share animation (with Photos access)

  1. In your phone settings or on app launch, allow Stick Nodes to access All Photos, then click Export GIF and give it a name. Wait for up to a minute while it exports.
  2. Find the GIF in your phone photos and upload to the #x-simple-animation channel.

    3. ⚠ī¸ Easy but less secure

Option B: Share animation (without Photos access)

  1. Capture a screencast of your phone while playing the animation in the app.
  2. Trim and crop it appropriately on your phone (eg, by clicking "edit" on the movie in the iOS Photos app).
  3. Find the GIF in your phone photos and upload to the #x-simple-animation channel.

    4. ⚠ī¸ Harder but more private

    🎩 Although it's not necessary for this exercise, when you save filenames for the web like your exported GIF, only use normal lowercase letters and connect words with an underscore _ or hypen -. Do not use spaces and avoid capitalizing words.

    • ❌ My Awesome Animation!.GIF
    • ✅ my_awesome_animation.gif

Resources

ℹī¸ How to record your screen on iOS or Android

đŸŋ Stick Nodes Animation Basics (NSFW)

đŸŋ 12 Principles of Animation