Arcs in animation: see the path a move takes

Arcs are one of the 12 principles of animation: almost everything alive moves on curves. A hand swings from the shoulder, a head nods from the neck, a leap rises and falls like a thrown ball. Something that moves in straight lines looks mechanical, and animators check their work by drawing the path a part takes across the frames. In Blender it is called a motion path; here it is the move maker's 〰 Path.

In this lesson you key a hop with the playhead and a slider, the way animators key a rig, and show its path as you go. First the hop goes straight up and down, and the path is a straight line. Then it travels, and the line becomes an arc. Then an arm swings with it, on arcs of its own. It takes about ten minutes, and the hop you make is a move every character in your cartoon can do.

1. Open the editor

Go to jabbertoon.com/editor/. This is the one editor: Cartoon, World, Game and Forge are its tabs along the top.

2. Go to the Forge

Press Forge at the top. The Forge is where things are made: characters, things, lands and moves.

3. Start a new move

Press New move. A person stands ready in the middle, the parts you can move are on the left, and the timeline is under the person.

4. See it from the side

Open Seen from and choose Seen from the side. A hop reads best from the side, where you can see it travel.

5. Pick the whole body

Under Pick a part, press body up. It moves the whole body up and down.

6. Go to the top of the hop

Press Later until the playhead says 0.5 s: five presses.

7. Up

Move the Turn slider to 100. The body is in the air, as high as it goes: the top of the hop.

8. Go to the landing

Press Later until it says 1.0 s: five more presses.

9. Down

Move the Turn slider to 0. The body is back on the ground.

10. Show the path

Press Path. A dotted line shows where the top of the head goes through the whole move: straight up and straight back down, along one line. A body that only goes up and down moves like a lift, not like a person.

11. Travel forward

Press body forward. It moves the whole body forward.

12. Land further on

Move the Turn slider to 100. Now the body lands further forward than it took off, and the path bends into an arc: up, over and down, the way a thrown ball flies. That curve is the principle of arcs.

13. Back to the top

Press Earlier until it says 0.5 s: five presses back.

14. The body again

Press body up. The key at the top of the hop is picked.

15. Hang at the top

Open How it gets there and choose Slows down. Look at the dots on the path: each one is the same slice of time, so where they crowd together the body is moving slowly. They crowd at the top of the arc, where a hop hangs for a moment.

16. Now an arm

Press right arm. The path follows the hand now.

17. Swing it up

Move the Turn slider to 150. The arm swings up as the body rises, and the hand travels on a curve: an arm turns at the shoulder, so on its own the hand can only move on an arc.

18. Go to the landing again

Press Later until it says 1.0 s: five presses.

19. Swing it down

Move the Turn slider to 0. The arm swings down as the body lands, and the hand comes down on a second arc, further forward, because the body has travelled.

20. Watch the hop

Press Play. The person hops forward, again and again, and the big dot rides along the path. Every part travels on a curve, and that is why it looks alive.

21. Name it

Click the box at the top, The move's name: it says “My move”. Delete those words and type a made-up name, like Hop on an arc.

22. Keep it

Press Use it. Hop on an arc is kept in 🎒 My moves, in this browser, and every character can do it now.

Try it yourself

• A long, low arc. Pick body up at 0.5 s and move it to 40: the arc goes as far but not so high, a skip rather than a leap. Put it back to 100 and move body forward at 1.0 s to 20 instead: a tall, narrow arc, a jump on the spot.
• Spacing. At 0.5 s, pick body up and choose Even under How it gets there: the dots on the way up spread out evenly, and the hop no longer hangs at the top. The arc is the shape of a move; the spacing of the dots is its timing.
• The head too. Pick head, give it a key of 40 at 0.5 s and a key of 0 at 1.0 s: the head tips as the body rises, and the path of the top of the head bends again, a small arc of its own riding on the hop's.

To learn more about the timing of a hop, see Animate a jump: a crouch before it springs, and legs and knees keyed in passes.