Animate guide

1. Getting started

The gallery shows your animations, newest first. + New picks a size (HD video, 720p, Square post, Story / Reel, 4:3, GIF / sticker, Banner, Phone game, or your own width and height), the frames a second (8 to 60; 24 is the film standard, 12 is common for drawn animation) and the length in seconds. Open the sample (when the gallery is empty) opens a short scene with a bouncing ball, a waving puppet, clouds on a far layer and a camera push, to look inside. Open opens an .anim.json file. An animation's ⋯ has Open, Duplicate, Download .anim.json and Delete.

Every change is kept in this browser as you work (the dot beside the name turns green). The ‹ at the top left goes back to the gallery.

2. The editor

• Top bar: the name (click to rename), the menus File, Edit, Layer, Timeline, View and Help, undo, redo, the zoom and Download.
• Tool bar on the left. A corner mark means the button holds more tools: click it again, hold it or right-click it to pick another. Under the tools are the line and fill colour chips.
• Stage in the middle: the white frame is what is filmed; things outside it still show (faintly when looking through the camera). A tip at the bottom says what the tool does.
• Dock under the stage: the timeline, the X-sheet or the graph editor (the three buttons in its bar). Drag the dock's top edge to make it taller or shorter.
• Panel on the right: Properties (the tool's settings, the picked shapes, the layer at this frame, the ease, the drawing, bones, deformers, effects), Library (symbols and puppets), Colours (the palette) and Scenes.
• Moving round: scroll or drag with two fingers; Ctrl+wheel or a pinch zooms; hold Space and drag, the middle mouse button, or the Hand (H). Ctrl+0 fits the stage.

3. Drawing: Brush, Pencil, Pen and shapes

Drawing tools draw on the current layer (the highlighted row in the timeline) at the current frame. If that frame shows no drawing yet, a key with an empty drawing is made there. Shapes are vectors: they stay sharp at any size and can be bent by bones and deformers.

• Brush (B): each stroke becomes one filled shape. With a pen it gets thicker as you press (Pen pressure); Thin ends tapers both ends. Set the Size in Properties, or with [ and ]. Shift draws a straight line. The brush paints with the line colour.
• Pencil (Y): a line with a width, smoothed into curves as you let go (Smoothing). Ends that meet close the line. A Profile makes it thin at both ends (◆), at the start (◀), at the end (▶) or thick in the middle (●).
• Pen (P): click for corners, drag for curves; click the first point to close the shape. Enter or Esc finishes an open path; Delete takes back the last point.
• Line (N), Rectangle (R), Ellipse (O), Polygon and Star: drag to draw. Shift makes squares and circles (and 45° lines), Alt draws from the middle. Draw with picks Line, Fill or Both; Polygon and Star have Sides / Points and Inner size.
• Texture (Brush, Pencil, Line): Smooth, Pencil (grainy), Chalk (broken) or Grain.

4. Colours and the palette

The two chips under the tools are the line colour (Brush, Pencil, outlines) and the fill colour (Paint bucket, filled shapes). Click one for the colour picker: drag in the square and the hue bar, set the see-through amount, type a hex code, or use the eyedropper (in browsers that have it). Recent colours show under it.

Linked colours (as in Harmony): the picker's Palette row, and the Colours tab, hold named colours such as Skin, Shirt or Shadow. A shape painted from the palette remembers it: change the swatch in the Colours tab and every shape using it changes, on every drawing and frame. Link the picked shapes ties picked shapes' colours to the palette (adding swatches for new colours); the number beside a swatch counts the shapes using it. A linked chip has a white corner.

5. Paint bucket, Eraser and Eyedropper

• Paint bucket (K): click inside lines to fill the area with the fill colour. The fill goes behind the lines, tucked under them so no white edge shows. Close gaps (None, Small, Medium, Large) lets it fill areas whose lines don't quite meet. Use lines on every layer fills between lines drawn on other layers too (the fill goes on the current layer). A click on a filled shape recolours it; Alt-click gives a line the line colour. If the area isn't closed it says so (close the gap, choose bigger gaps, or zoom out so the whole area is in view).
• Eraser (E): Pieces rubs out what you go over, cutting filled shapes and lines; Whole shapes removes every shape you touch. Size in Properties or with [ / ].
• Eyedropper (I): click a shape to take its line and fill colours; elsewhere it takes the colour under the pointer as the fill.

6. Picking and changing shapes

• Select (V): click a shape to pick it (Shift adds); drag on nothing for a box. A click on a shape on another layer switches to that layer. Drag to move (Shift keeps it level, Alt moves a copy), drag a corner to resize (Shift keeps the shape, Alt from the middle), drag just outside a corner to turn (Shift: 15° steps). Arrow keys nudge (Shift: 10). Double-click a shape for its points.
• Points (A): drag points and their handles; a press on a shape picks all its points; drag on nothing to box several. Alt-click a point turns it from corner to smooth and back; double-click a line adds a point; Delete removes picked points. Properties has Corner, Smooth and Delete.
• Properties for picked shapes: line and fill colour, width, profile, texture, Bring to front, Send to back, flip, duplicate, delete, Smooth (fewer points, softer curves), Convert to symbol and Move to a new layer.
• Edit menu: Cut, Copy, Paste (Ctrl+V; into another frame or layer it lands in the same place), Paste in the same place, Select all, Deselect.

7. The timeline

Each row is a layer, topmost first; groups open with their arrow. Under the layers are the Camera row and, when there is one, the Sound row. Columns are frames: the numbers along the top, a darker line every second, and a thick line at the end of the timeline (it grows when you key past it; Timeline › Timeline length… sets it).

• What the marks mean: a black dot is a key with a drawing, a hollow dot a key with nothing; the grey bar is how long that drawing is shown; green with a line is a shape tween. Purple diamonds are keys of the layer's place, turn, size or opacity (a tint between two of them is a tween); orange diamonds are bone keys; teal ones deformer keys. A dashed blue box is a cycle; pink ticks on a symbol layer are where its loop starts again.
• Click a cell to go to that frame and layer; drag across cells (and rows) to pick frames; Shift+click extends. Click the numbers along the top, or drag along them, to scrub. Drag a key (or picked frames with keys) to move it in time. Right-click (or hold on a phone) for the frame menu. Double-click a symbol layer to edit inside it.
• The bar above: first frame, back a frame, play (Enter), forward, last; the frame number; loop; onion skin and its settings; light table; through the camera; add a layer (+); delete the layer; insert keyframe; the frame menu (⋯); Timeline / X-sheet / Graph; and − / + for narrower or wider frames (also Ctrl+wheel on the timeline).
• Frame menu (also the Timeline menu): Insert frame (F5), Remove frame (Shift+F5), Insert keyframe (F6: a copy of the drawing shown, and keys of every animated value), Insert blank keyframe (F7), Clear keyframe (Shift+F6), Create motion tween, Create shape tween, Remove tween, Ease…, Copy / Cut / Paste frames (Ctrl+Alt+C / X / V), Reverse frames, Drawings on ones / twos / threes, Select all frames.
• Layer rows: the eye hides, the lock locks; double-click the name to rename; drag a row to move the layer (onto the middle of a group to put it inside); right-click (or hold) for Rename, Duplicate, Delete, Put in a group, Ungroup, Add bones, Convert to symbol, Save as a puppet, Mask the layer below, Guide, Hide others and Show all.

8. Frame by frame, onion skins and the light table

Classic drawn animation: draw a pose, press F7 a few frames later for a blank key (or F6 to start from a copy), draw the next pose, and so on. Play it with Enter, step with , and ., jump between keys with Alt+, and Alt+..

• Onion skin (Alt+O): drawings before show faintly in red, after in green. Its settings: Drawings before and after (the neighbouring drawings, however long each is held) or Frames before and after; 1 to 5 each way; Every layer instead of only the current one.
• Light table: the other layers go faint so the one you draw on stands out.
• Drawings on twos: picks frames, then Drawings on ones / twos / threes makes each drawing last 1, 2 or 3 frames (the whole layer when only one frame is picked).

9. Drawings, exposures and drawing substitution

As in Harmony, a drawing layer holds a set of drawings (named 1, 2, 3 … or anything you like) and an exposure: which drawing shows from which frame. A drawing held over many frames is one drawing, so changing it changes every frame it shows on.

• Properties › Drawing: the name of the drawing shown here (rename it), the frame of its key, and Swap the drawing here for: thumbnails of all the layer's drawings; a click shows that one from this key on (drawing substitution: hands, mouths, eyes, blinks). Drawings stay with the layer even when not shown; Remove unused drawings clears them out.

10. The X-sheet

The X-sheet (exposure sheet) shows the drawing layers as columns and the frames as rows, top to bottom, as on paper. A cell with a name is where a drawing starts; a line below it is the drawing held; × is nothing. Click a cell to go there; double-click it, or just type, to enter a drawing name (an existing one, or a new name for a new empty drawing); × or - shows nothing from there. Enter moves down a frame; the up and down arrows step. A thick line marks each second.

11. Moving layers and motion tweens

Every layer has a place (X, Y), a turn, a size (W %, H %), a skew and an opacity that can change over time. Set them at two frames and the frames between are worked out (a tween).

• Move layer (Q or T): drag to move the layer, drag a corner to resize (Shift keeps the shape), drag just outside a corner to turn (Shift: 15° steps). The dot is the pivot, the point it turns and grows round: drag the dot to move it (the layer stays put). Each change keys this frame; the first time a value changes, its old value is also kept at frame 1, so you get a tween straight away (as in Moho). It works on any layer: drawings, groups, symbols, pictures, particles.
• Create motion tween (frame menu): keys place, turn, size and opacity at both ends of the picked frames (or of the drawing's stretch), then switches to Move layer so you can change the last key.
• Properties shows each value at this frame; a ◆ turns orange when there is a key here; typing a value keys it. Reset this frame and Pivot to the middle are in the tool's settings.
• Remove tween drops the keys inside the picked frames (or the shape tween).

12. Eases and the graph editor

An ease sets how a tween speeds up and slows down. Properties › Ease from frame … applies to the stretch that starts at the key at or before this frame, for every value keyed there: Linear, Ease, Ease in, Ease out, Ease in and out, Strong in / out / in and out, Back in, Overshoot, Hold (jumps at the next key), Bounce and Elastic. Drag the two round handles of the curve below to make your own. The frame menu's Ease… sets it for picked keys.

The graph editor (the dock's third button) draws each value of the current layer (or the Camera row, or a rig's bone turns) as a curve over time, each in its own range so they fit together. Tick which to show. Drag a key to change its frame and value (Shift: only its value); the round handles of the picked key shape the ease after it. Double-click near a curve to add a key there; Delete removes the picked key. A click elsewhere moves the playhead.

13. Shape tweens and shape hints

A shape tween morphs one drawing into the next: Properties › Drawing › Shape tween to the next key, or Create shape tween in the frame menu, on the first key. Shapes are paired in drawing order (the first with the first …); their points, colours and line widths blend. A shape with no partner shrinks away or grows in.

Shape hints fix a twisting morph: pick the shape, then Properties › Drawing › Shape hints opens the hint tool; Add a hint puts a lettered dot on both drawings. Drag hint a on the first key (yellow) and on the last key (green) to places that should match; each outline of a shape takes one hint. Remove hints clears them.

14. Motion paths

The Motion path tool (M) draws the route the current layer travels along, from where it is now (start drawing on it). The layer's Along path value is keyed 0 % at this frame and 100 % two seconds later; change those keys, or their ease, like any other. Properties › Layer options › Motion path: Turn along the path (it faces the way it goes), the Along % at this frame, and Remove the path. X and Y still move it on top of the path.

15. Layers, groups (pegs), parents, masks and guides

• + in the timeline adds a Drawing layer, a Group (peg), Bones (a rig), Particles, a picture, a sound, a reference video, SVG or PSD layers, or a symbol from the library. New layers go above the current one, inside its group.
• A group moves, turns and scales everything in it (Harmony calls such a group a peg). Put a layer in a group with Ctrl+G.
• Layer options: Blend (Multiply, Screen, Overlay …), Layer opacity (a fixed opacity on top of the animated one), Guide layer (shown while you work, left out of downloads), Mask the layer below (this layer's shapes cut out the layer just under it; put several layers in a group to mask them together), Follows (a parent layer: this layer moves with it, for top-level layers), Depth and Fixed to the camera (see The camera), and the cycle (see Cycles).

16. Symbols and the library

A symbol is a little animation with its own timeline that you can use many times. Convert to symbol works on picked shapes (they move into the symbol and a symbol layer takes their place, its pivot in their middle) or on a whole layer (from its menu; it keeps its animation). The Library tab lists symbols: + puts one in the scene; ⋯ has Edit, Rename, Duplicate and Delete (only when no layer uses it).

• Double-click a symbol layer in the timeline (or Properties › Edit the symbol) to work inside it: the timeline shows its layers, its (0, 0) sits in the middle of the stage, and the bar at the top of the stage leads back. Esc also goes back. Its length is in Properties.
• A symbol layer plays its symbol as Loop, Play once or One frame, from a First frame, starting at a frame of the scene (Starts at). Animate the symbol layer itself with Move layer.
• Break apart turns a symbol layer into a group holding copies of the symbol's layers (its own looping is not kept).

17. Bones: rigging and posing

Bones bend and move what is inside their group, as in Moho. + › Bones (or a layer's Add bones) makes a rig: a group with bones, with the layer inside it when you start from one.

• Add bones (X): drag to draw a bone. Start on the end of a bone to add a child bone (it follows its parent). Drag a bone's end to change its angle and length, its base or middle to move it; Shift keeps 15° steps. While this tool is on, rigs show their rest pose.
• Pose bones (C): drag a bone and its chain follows (inverse kinematics) up to a pinned bone or the root. Alt turns only that bone; a bone with no parent turns by itself, and Shift-dragging it moves the whole rig. Each pose keys this frame; with Freeze pose on, every bone of the rig is keyed there too, so earlier poses don't drift.
• Properties › Bones: the three bone tools, Freeze pose, Key the whole pose here and Back to rest here. Click a bone to pick it; Properties › Bone: name, its turn here and stretch (keyed), the least and most it may turn, length, Reach (how far it pulls points), Pinned, Dynamics and Delete bone (Delete too).

18. Binding layers and points to bones

Pick a layer inside a rig; Properties › Bones move this layer sets how:

• Flexible (the start): every point follows the bones near it, blended, so shapes bend smoothly at joints. Set a bone's Reach to widen or narrow its pull.
• Whole layer: the layer moves rigidly with one bone: cut-out puppets made of separate parts (an upper arm, a forearm, a hand).
• Points: points you tie with the Bind points tool follow their bone; the rest stay. Click a bone, then drag a box round points of the current layer.
• None: the bones don't move it (a body that stays while the arm waves).

Pictures in a rig bend too (drawn as a fine mesh). Drawing on a layer in a posed rig draws in the rest pose's place.

19. Smart bones, dynamics and puppets

• Smart bones fix the shape at a joint: pose the bone (say, bend the elbow), pick the bone, then on the drawing layer press Smart bone shape…; move the points (with Points) to how they should look at that bend and press Done. From then on, turning the bone towards that angle moves those points that way, by how far it has turned. The Bone section lists a bone's smart shapes, each removable.
• Dynamics: a bone with dynamics swings behind as its base moves: hair, tails, antennae, ears. Stiffness (how hard it springs back), Damping (how soon it settles) and Gravity (pulls it down, or up when below 0). It is worked out from frame 1, so play from the start to see it right.
• Puppets: a group's menu (or Layer › Save as a puppet) keeps it with its bones, drawings, pictures, symbols and palette colours in this browser; the Library tab's Puppets list puts a copy in any animation (+), or deletes it.

20. Envelope and curve deformers

Deformers bend a drawing or a picture without bones (Properties › Deformers):

• Envelope (U): a click adds a grid round the layer; drag its points to bend what is inside, smoothly. Each change keys this frame. Across / Down set the grid (2 to 8; changing it starts again), Undo the bend here, Remove.
• Curve: drag along the layer to lay a curve of five points (an arm, a tail, a stem), then drag its points to bend what is near it. Reach sets how far from the curve things follow.

21. Cycles

A cycle repeats a layer's animation: Layer options › Cycle from … to … plays those frames again and again after the last one (a walk, a flag, a blink loop). Back and forth plays them forwards then backwards. It works on drawings, keys, bones and everything inside a group.

22. The camera and depth

Each scene has a camera. The Camera tool drags it (Shift-drag turns it, the wheel zooms), keying the frame. When it moves, a dashed purple frame shows what it sees; the camera button in the timeline (Through the camera, also View) shows its picture, with the rest shaded. Click the Camera row for its X, Y, Zoom %, Turn and Tint (a colour laid over the picture: fade to black, flash white), Shake here (eight frames of shake), and Reset. Its keys show on the Camera row, and in the graph editor.

Depth (Layer options, top-level layers): a layer with a bigger depth is farther away and moves less when the camera moves or zooms; a negative depth is nearer and moves more. This gives parallax, like Harmony's multiplane. Fixed to the camera keeps a layer still in the picture (titles, subtitles, frames).

23. Particles

A Particles layer throws out dots, squares, stars or its own drawing: sparks, snow, bubbles, dust. Properties: per second, life (frames), speed, direction, spread, gravity, emitter width, size at start and end, spin, colours at start and end, shape, fade out, and Shuffle for another random pattern. Move the emitter with Move layer: particles are born where it is at that moment, so a moving emitter leaves a trail. For Its drawing, draw on the particles layer (its first drawing is used).

24. Effects, blending and line textures

Properties › Effects adds to a layer: Blur, Glow (size, strength, colour), Drop shadow (across, down, blur, opacity, colour), Colour tint and Brightness and colour (brightness, contrast, saturation, hue). Tick one off to hide it. Blend modes and line textures are in Layers and Drawing.

25. Sound and lip sync

+ › Sound… (or File › Import a sound) puts a sound (MP3, WAV, M4A, OGG) on the scene; a scene shorter than the sound grows to fit. Its waveform shows on the Sound row. Click the row for: Starts at frame, Skip (seconds from the file's start), Volume, Hear it while stepping through frames, Scene as long as the sound, Remove. It plays with the animation and goes into video and HTML downloads.

Lip sync swaps mouth drawings to follow a voice. The mouth layer needs drawings named rest, MBP, AI, E, O, U, FV, L, WQ and etc (the Preston Blair set); Make a mouth layer draws a simple set to redraw in your style. Optionally type the words, then press Lip sync: quiet stretches get rest, the rest is guessed from loudness and tone, and typed words are spread over the voiced stretches in order. It is a quick first pass to check by eye and fix in the X-sheet, not speech recognition.

26. Scenes and the storyboard

The Scenes tab shows a card per scene with a picture and notes. A click opens a scene; New scene adds one after this one; ⋯ has Open, Rename, Duplicate, Move earlier / later and Delete. Each scene has its own timeline, camera and sound; the library and palette are shared. Downloads with Scenes: All play them one after another. Storyboard sheet downloads a PNG page with up to three key frames of every scene and its notes.

27. Importing pictures, SVG, PSD and reference video

• Pictures (PNG, JPG, WebP, GIF …) become picture layers, fitted to the stage. Move them with Move layer, bend them with bones or deformers.
• SVG: each top-level group becomes a drawing layer named after it (loose shapes share one), with fills, lines, widths and see-through; gradients take their first colour. Art from PixelDodo's Vector comes in as parts ready to rig.
• PSD: each layer becomes a picture layer in its place, groups become groups, inside one group named after the file.
• Reference video: goes at the bottom as a locked, faint guide layer that follows the timeline, to draw over (rotoscoping). It is never in downloads.

28. Downloading: video, GIF, Lottie and more

Download (Ctrl+E) picks a format, a size (25 % to 200 %), the frames (all, or from – to) and the scenes (this one, or all in order):

• Video: MP4 (or WebM where MP4 can't be made) with the scenes' sounds.
• GIF (256 colours a frame, optional dithering, loop or once), Animated PNG (full colour), PNG frames (a .zip), Sprite sheet (one PNG grid and a TexturePacker-style JSON for game engines). Turn the background off for see-through pictures.
• SVG: the current frame as vectors (bones and deformers as drawn; effects left out).
• Lottie: JSON for apps and websites (lottie-web, Android, iOS). Tweens, groups, the camera, symbols and pictures are kept; bones, deformers, cycles and shape tweens are written frame by frame; particles, effects, masks and reference videos are left out.
• HTML player: one .html file with the animation, its pictures and sound inside, that plays in any browser (tap to start, tap to pause).

Guide layers and hidden layers are never in downloads.

29. Where your work is kept

Animations are kept in this browser (IndexedDB) as you work, with their pictures and sounds; puppets are kept there for every animation. Clearing the browser's site data removes them, so keep a copy: File › Save as .anim.json (Ctrl+S) downloads the whole animation with its pictures and sounds, and Open brings it back as a new animation. File › Animation settings… changes the size (optionally scaling the art), the frames a second and the background colour.

30. On a phone

• The tools are a row at the bottom (with names) under the timeline; the colour chips stay at its left, and the row's end fades while there are more tools to scroll to. Hold a tool for the others in its group. Held on its side, the phone puts the tools down the left and opens the sheet from the right.
• The drawing tools (brush, pencil, eraser, line, shapes, pen) have a size slider on the stage's left edge: drag it and a dot shows the size at this zoom.
• Pinch to zoom and drag with two fingers; the zoom is at the top right. Tap with two fingers to undo, with three to redo.
• The timeline's bar keeps back, play, forward, the frame number, onion skin and insert keyframe; its ⋯ has the rest (frame operations, add or delete a layer, first and last frame, loop, onion settings, light table, through the camera, Timeline / X-sheet / Graph, wider or narrower frames).
• Tap the handle above the timeline to fold it down to its bar (the stage gets the room), tap again to bring it back; drag the handle to make the timeline taller or shorter.
• The sliders button opens Properties (and the other tabs) as a sheet: drag its handle to resize or close it; it opens at the height you left it. The top bar's ⋯ has New, Open, Save, Import a picture, Fold the timeline and the Guide, then every menu.
• On the timeline, tap a cell to go there, hold still then drag to pick frames, drag quickly to scroll, and hold for the frame menu. Each layer has its eye; a locked layer shows its lock. Hold a layer name for its menu (with Hidden and Locked); drag the names to scroll them.
• A tool's tip shows once a visit, at the top of the stage.

31. Keys

On a Mac, Cmd works wherever Ctrl is written, and Option is Alt.

32. Good to know

• Units are pixels of the stage; frames are counted from 1 on screen.
• Big animations with many layers, effects or particles play slower in the editor than in a downloaded video, which is made frame by frame.
• Dynamics and particles are worked out from the first frame, so they are the same every time you play or download.
• Pictures and sounds are kept inside the animation, so a long sound or many big photos take room in the browser.
• Nothing you make is sent anywhere: the page itself stops the browser from sending anything out.