Getting Started with FrameAnim: Your First Animation

What you need

A browser. That is the whole list. FrameAnim runs entirely in the page — there is nothing to install, no account to create, and no upload step. Your projects are stored in your browser's own storage, which means they are private to your device and available the next time you open the site on it.

A mouse works fine, a trackpad works, and a drawing tablet or a touchscreen works best. The editor has a desktop layout with the tools in a vertical rail down the left side, and a mobile layout with the tools in a horizontal dock near the bottom of the screen, so a phone or tablet is a genuine option rather than a fallback.

Creating your first project

The dashboard is the home for your work. It lists every project you have, shows how many of your ten slots are used, and has a New Project button at the top.

If you arrive with no projects at all, FrameAnim does something slightly different: it builds a small sample animation, saves it as a project, and opens it in the editor straight away. This is deliberate — looking at a finished project with frames already on the timeline tells you more about how the editor works than an empty canvas does. It is a normal project, so you can draw on it, break it, or delete it without consequence.

From then on the dashboard is where you come back to. Each project card opens the editor for that project, and deleting one asks for confirmation first, since there is no undo for a deleted project.

Choosing a canvas size

Canvas size is the one setting worth thinking about before you start drawing, because changing it later means your existing drawings no longer fit the frame the way you intended. Project settings accepts any width and height between 100 and 4096 pixels, and offers presets for the places animations usually end up:

The interface, one piece at a time

The editor has four regions, and each one does exactly one job:

• The canvas, in the middle. Your drawing surface. Hold Space and drag to pan, or drag with the middle mouse button. Scrolling pans vertically, and Ctrl plus scroll zooms. Ctrl 0 resets the zoom by fitting the canvas to the screen.
• The toolbar, a vertical rail on the left on desktop and a horizontal dock near the bottom on mobile. Holds the drawing tools, the colour picker, the glow controls, undo and redo, and clear.
• The timeline, along the bottom. One cell per frame, in order, with the current frame highlighted. This is where you add, duplicate, delete, and select frames.
• Playback and onion skin controls, near the timeline. The play button, the loop toggle, the frame rate slider, and the onion skinning settings.

There is also a layer panel. Layers let you keep parts of a drawing separate within a single frame — a background that never changes, a character that does, a ground line that must stay perfectly still. They are the single biggest workflow improvement available in the editor, and they get their own article in working with layers.

The drawing tools

Every tool has a single-key shortcut, and learning six of them is the difference between the editor feeling slow and feeling immediate.

Ctrl Z undoes and Ctrl Y redoes, with Ctrl Shift Z as a second redo if that is the shortcut your fingers already know. The lasso is the most capable of these tools by a wide margin, and it has its own guide in using the lasso and transform tool.

Frames and the timeline

A frame is one drawing. An animation is a sequence of them played in order. The timeline shows them left to right, and three shortcuts cover everything you need:

• Ctrl N — add a new, empty frame after the current one.
• Ctrl D — duplicate the current frame, giving you a copy of the drawing to modify. This is how you animate most of the time, because changing a copy is far faster than redrawing from scratch.
• Ctrl Backspace — delete the current frame.

Step through frames one at a time with , and . — the comma and full stop keys, which sit next to each other so you can scrub back and forth with two fingers. Getting into the habit of stepping rather than clicking is a surprisingly large speed-up.

Playback and onion skinning

Shift Space plays and pauses. Home plays from the start. Shift L toggles looping, which you usually want on while you work — a cycle played on repeat makes problems obvious in a way that a single pass never does.

The frame rate slider runs from 1 to 30 frames per second. Twelve is the traditional choice for hand-drawn work and a good default; higher rates are smoother but need proportionally more drawings for the same length of action. This decision has consequences for everything else you do, so it is worth reading animation timing and frame rates early.

Onion skinning, toggled with O, shows neighbouring frames as coloured ghosts behind the one you are drawing. You can set the ghost opacity between 10% and 80%, show up to five previous frames, and show up to three upcoming ones. It is the single feature that makes drawing frame by frame practical, and it has its own article in onion skinning.

Saving, autosave, and the project limit

FrameAnim autosaves two seconds after you stop making changes, so in normal use you never have to think about saving. Ctrl S saves immediately and cancels the pending autosave, which is worth pressing before you close a tab or reload the page.

Projects are stored in your browser's IndexedDB, and you can keep up to ten at once. The dashboard shows your count, and the New Project button is disabled when you reach the limit — delete a project you have finished with to free a slot. The cap exists because browser storage is finite and animation frames are large; it is not a licensing limit.

Two consequences worth internalising. First, clearing your browser data deletes your projects along with everything else, and there is no copy on a server to restore from. Second, a project made on your laptop will not appear on your phone. Export anything you want to keep or move, and treat the export as the real artefact.

Shortcuts worth learning first

The full list is available any time by pressing ? in the editor. These are the ones that pay for themselves within the first session:

Your first animation in ten minutes

The fastest way to understand the editor is to make something trivial in it. Draw a ball moving across the screen in five frames. It is not interesting, and that is the point — you will learn the workflow without the drawing getting in the way.

1. 1
   Open the dashboard and create a project

   Go to the dashboard and press New Project. If this is your first visit and you have no projects, FrameAnim creates a small sample animation for you and opens it, so you can see a finished project before making your own.
2. 2
   Set the canvas size

   Open project settings and either type a width and height or pick a preset such as YouTube Video at 1920 by 1080 or Instagram Reel at 1080 by 1920. Any value between 100 and 4096 pixels is accepted on each axis.
3. 3
   Draw something on frame 1

   Press P for the pen and draw a simple shape — a ball, a stick figure, a single letter. Keep it simple, because you are about to redraw it several times.
4. 4
   Add a frame and turn on onion skinning

   Press Ctrl+N to add a frame, then press O to turn on onion skinning. The previous drawing appears as a faint ghost, which is what lets you draw the next one in relation to it.
5. 5
   Draw the next position

   Draw your shape again, slightly moved from the ghost. Repeat for four or five frames. Resist adding detail; the point of the exercise is the motion.
6. 6
   Play it back

   Press Shift+Space to play, and press it again to pause. Use the frame rate slider to try the same drawings at different speeds — anything from 1 to 30 frames per second.
7. 7
   Save it

   Press Ctrl+S to save immediately. FrameAnim also autosaves two seconds after you stop making changes, so your work survives a closed tab either way.

When it plays, you have used every core feature the editor has. Everything from here is a matter of drawing better and timing better, which is what the rest of these tutorials are about.

Common mistakes

• Starting on a 4K canvas. Every drawing takes longer, exports take much longer, and none of it helps you learn. Use 800 × 600 for practice.
• Drawing every frame from scratch. Duplicate with Ctrl D and modify. Redrawing from nothing causes the whole figure to drift and change size.
• Putting everything on one layer. A background redrawn by hand on every frame will wobble, and it costs you most of your drawing time.
• Working with onion skinning permanently on. It flatters your drawings. Toggle it off regularly.
• Never exporting. Projects live in this browser only. An export is the only copy you actually own.
• Starting with a complicated character. Detail multiplies by the number of frames. A ball or a stick figure is the correct first subject.

Where to go next

Read frame-by-frame animation basics next — it covers how to think about a sequence of drawings rather than how to operate the editor. Then onion skinning and working with layers, which are the two features that most change how you work.

For your first real exercise, the bouncing ball is the traditional starting point, and the simple jump is a good second. When you have something you want to share, see exporting your animation, which covers the GIF, WebM, and MP4 options. The full tutorial index lives at all tutorials.