Open studio

Rig a paper puppet and make it walk

Draw bones over a puppet’s parts, let IK bend the knees, key four poses and loop them into a walk.

Read the manual

What you’ll make

  • A character in parts, one PNG per piece, drawn side on and lined up so that the joints meet. This guide uses a paper puppet facing right in 14 parts: head, torso, and a thigh, shin, foot, upper arm, forearm and hand on each side.
  • Names that say front and back, numbered from the front: 01 front hand … 14 back hand. The import orders the layers by name, so the near limbs sit on top.
  • A browser with WebGPU⁠ (external website, opens in a new tab), such as a current Chrome, Edge or Safari.

1. Bring the parts in

  1. Drop the whole puppet as one picture on the empty composition’s start card. The composition takes its size, 1080 × 1080 here.

  2. Drop the folder of parts on Upload file and choose Import 14. Every part is a layer, in the place it was drawn.

  3. Delete the whole picture’s layer: the parts replace it.

The editor with the puppet’s 14 parts as layers, stacked into the whole figure
  1. The parts, lined up into the puppet.
  2. One layer per part, the front ones on top.

2. Give the body a spine

  1. At the foot of the Project panel, select New layer and choose Skeleton.

  2. Choose the Bone tool (J) and drag from the hip up to the neck. This first bone carries the whole body: moving it moves everything.

  3. Click the torso in the viewer to attach it to the bone.

  4. Drag from the neck to the top of the head for a second bone, then click the head.

Start at the hip, not the head: the hip is where a walking body turns and bobs, so the bone that holds everything should start there. A drag that starts on the selected bone grows a new bone from it.

3. Rig the far limbs first

  1. Hide the six front parts and the torso with their eyes in the Timeline. A click attaches the topmost part under the pointer, and the front parts cover the back ones exactly.

  2. Click the tip of the torso bone to select it, then drag from the hip down to the knee and click the back thigh.

  3. Drag on from the knee to the ankle and click the back shin and the back foot. With this lower bone selected, choose Add IK in the bone’s options.

  4. Hide the back leg’s three parts too, select the torso bone again and draw the back arm the same way: shoulder to elbow for the upper arm, elbow to wrist for the forearm and hand.

  5. Show every part again.

The front parts hidden in the Timeline and two bones drawn down the back leg, with IK on the lower one
  1. The front parts’ eyes, off while you rig the back.
  2. The back leg: hip to knee, knee to ankle.
  3. The lower bone’s options, with IK added.

4. Rig the near limbs

  1. Select the torso bone and draw the front leg over the back one: hip to knee, then knee to ankle. Attach the front thigh, shin and foot, and add IK to the lower bone.

  2. Draw the front arm the same way and attach the front upper arm, forearm and hand.

All ten bones over the puppet, the last forearm selected with its options in the viewer’s top row
  1. The Bone tool.
  2. Ten bones: spine, head, two legs, two arms.
  3. Each bone’s Position, Rotation, Scale and Length in Properties.

The front bones lie exactly on the back ones, and of two bones under the pointer the one drawn last is picked. Rigging the far side first is what lets a click on a shared joint reach the near limb.

To test a bone, turn it with the Selection tool by the ring at its joint: every part that should follow it moves. A part that stays behind is on the wrong bone; undo the turn afterwards.

5. Make the knees bend forward

  1. In Properties, each IK chain has a Target: where the ankle should be. Change its X and the leg bends to reach it.

  2. A two-bone leg can bend either way. If the knee bends backwards, tick Flip Bend. The puppet faces right, so both knees need it.

The puppet’s feet apart, both knees bent forward, Flip Bend ticked for both IK chains in Properties
  1. The front foot’s IK target.
  2. Flip Bend: the knee bends the other way.
  3. Both knees bend forward.

6. Key four poses

  1. A walk is two steps, each with two poses: contact, both feet down and apart, and passing, one leg straight under the body while the other swings past it, lifted.

  2. At frame 0, type the first pose’s values below, then turn on each property’s stopwatch. Go to frames 6, 12, 18 and 24 and type each pose; every change sets a keyframe.

  3. Frame 24 is frame 0 again, so the cycle closes. The targets are in the skeleton’s coordinates: X 0 is under the hip and Y 435 is the ground.

  4. Swing the arms against the legs: the front upper arm (Bone 9) 200° at frame 0, 160° at 12 and 200° at 24; the back one (Bone 5) the other way round. 180° hangs straight down. Let the forearms lag by bending them a little more on the forward swing.

FramePoseFront foot targetBack foot targetBone 1 Position Y
0Contact, front foot forward80, 435−80, 43572
6Passing, back foot lifted0, 4350, 39560
12Contact, back foot forward−80, 43580, 43572
18Passing, front foot lifted0, 3950, 43560
24Contact again80, 435−80, 43572
The passing pose at frame 6: the back foot lifted past the planted front leg, with the IK targets’ keyframes in the Timeline
  1. The front foot’s keys on frames 0, 6, 12, 18 and 24.
  2. The front foot’s target at frame 6: under the hip.
  3. The back foot passing, lifted.

Leave these keys linear. The planted foot slides back at the same speed as the body would move forward; an eased key slows it down in the middle of a step and the foot skates.

7. Loop the cycle

  1. On each property with keys, select its Σ button and type loopOut("cycle").

  2. Select Preview, then Apply. After frame 24 the property starts again from frame 0, for as long as the composition runs.

The front foot’s IK target with loopOut("cycle") typed into its expression
  1. The expression: repeat the keys.
  2. Apply, after Preview.

Seven properties carry keys here: the two targets, the hip’s Position and the four arm Rotations. The keys stay editable: change a pose and every loop changes with it. The expression reference⁠ (opens in a new tab) lists the other ways to repeat.

8. Play it and judge it

  1. Press Space to play, and step through frames 0 to 24 with the arrow keys.

  2. The planted foot stays put on the ground line and slides back evenly. If it sinks or hovers, its target’s Y is off the ground.

  3. The leg never snaps straight. A target further away than the leg can reach pulls the leg straight and the foot comes off it: shorten the stride or lower the hip.

  4. The body is lowest at contact and highest at passing. Without that bob the puppet glides.

  5. Each arm swings against its own leg: front foot forward, front arm back.

  6. Frame 24 matches frame 0. A jump where the cycle restarts means the last key differs from the first.

9. Export it

  1. Choose Export video or images at the top right and pick a format: Animated GIF for a loop to share, or WebM or MP4 for a video.

  2. Export a whole number of cycles, such as Start frame 0 and End frame (exclusive) 48, so that the file loops without a jump.

Where to go from here

Keep going