About FrameAnim

FrameAnim is a free frame-by-frame animation editor that runs entirely in your web browser. You draw each frame by hand, flip between them on a timeline, and export the result as a GIF, WebM, or MP4. There is nothing to download, no account to create, and no subscription.

Why we built it

Traditional hand-drawn animation has a strange accessibility problem. The craft itself is old and well documented — the principles that make a bouncing ball read as heavy have not changed in eighty years. The software, though, tends to sit behind a multi-gigabyte installer, a licence fee, or both. Someone who just wants to find out whether they enjoy animating has to make a real commitment before they draw a single frame.

The browser-based alternatives usually solve that by moving your work onto a server. That trades one barrier for another: you need an account, an internet connection while you work, and a certain amount of trust that your drawings will still be there next year.

FrameAnim takes the third option. The editor is a web page, so it opens in seconds on whatever device you already have. Your work is saved in your own browser rather than on our servers, so there is no sign-up step and nothing of yours to lose if we are not around. The trade-offs that come with that choice are described further down this page, because they are real and you should know about them before you start a long project.

How it works

Every part of FrameAnim runs on your device. When you draw, you are drawing onto an HTML canvas in your own browser tab. When you save, your frames and layers are written to that browser's local storage and IndexedDB. When you export, the frames are encoded into a GIF or video file locally and handed straight to your downloads folder.

In practice that means a few useful things. Your drawings never pass through our servers, so there is nothing for us to read, lose, or leak — our privacy policy spells out exactly what we do and do not collect. Projects reopen instantly, because they were never remote in the first place. And after the first visit the editor largely works without a connection.

It also means your projects are tied to the browser profile you created them in. Clearing site data, using a private window, or switching to another device will not carry them across. Export anything you care about — an exported file is yours and lives wherever you keep your other files.

What is in the editor

Who it is for

What FrameAnim is not

Being honest about the edges of a tool saves everyone time. FrameAnim is deliberately a hand-drawn, raster, single-user editor, and there are things it does not try to do:

• ▸No cloud sync or collaboration. There are no shared projects, comments, or live multi-user editing, because there is no server holding your work. One browser, one copy.
• ▸No rigging or tweening. Frames are drawn, not interpolated. There are no bones, no motion curves, and nothing that generates in-betweens for you. That is the point of frame-by-frame work, but it does mean more drawing.
• ▸Raster, not vector. Strokes are pixels. Scaling a finished animation up well past the resolution you drew it at will soften it, so pick your canvas size with the final use in mind.
• ▸Browser memory is a real limit. A large canvas with hundreds of multi-layer frames will eventually strain a browser tab. For long pieces, split the work into shorter scenes and join the exports in a video editor.
• ▸No audio. There is no soundtrack or lip-sync support. Animate to a count, export the video, and add sound afterwards.

Learning the craft, not just the buttons

A drawing tool on its own does not teach you why one bounce feels like a rubber ball and another feels like a bowling ball. We write the guides alongside the editor so the two match: every tutorial is something you can follow in FrameAnim itself, with the exact frame counts and settings used.

• ▸Frame-by-Frame Animation — Understand how a sequence of still drawings turns into believable movement, and the workflow behind every hand-drawn animation.
• ▸Animation Timing and FPS — Learn what frame rate really means, how 12, 24 and 30 FPS differ, and how timing and spacing shape the feel of motion.
• ▸Keyframes and In-Between Frames — How key poses define an action and in-betweens carry the motion between them — including the breakdown drawing that decides how a movement feels.
• ▸Timing vs Spacing — Why two animations with the same number of frames can feel completely different, and how to diagnose motion that is technically correct but lifeless.
• ▸Squash and Stretch — The principle that gives objects weight, flexibility and life — and how to apply it without breaking believability.
• ▸Anticipation — The small movement in the opposite direction that makes an action readable, and how much of it to use for actions of different size.
• ▸Follow Through & Overlapping Action — How trailing parts keep moving after the main body stops, why nothing in a body starts and stops at once, and how to animate the settle.
• ▸Arcs — Almost nothing in nature moves in a straight line. Learn to plan curved motion paths and spot the mechanical look that straight paths produce.
• ▸Exaggeration — Why copying reference exactly looks flat on screen, which four dials you can actually push, and how to find the limit for your style deliberately.
• ▸Bouncing Ball — The classic first exercise. Plan the motion, place key poses, and use squash, stretch and spacing to sell the bounce.
• ▸Walk Cycle — Build a looping walk from four key poses — contact, down, passing and up — with timing and spacing that read as natural.
• ▸Blinking Animation — The cheapest unit of life in animation. Build a six-frame blink with a fast close and a slower open, then vary it to suggest mood.
• ▸Simple Jump Animation — A twelve-frame jump from crouch to landing, using anticipation, an arc through the air and a settle on impact to sell the weight.
• ▸Using Onion Skinning — See your previous and next frames as ghosted references so every new drawing stays consistent and on-model.
• ▸Working with Layers — Separate characters, backgrounds and effects onto their own layers to stay organised and animate faster.
• ▸Exporting Your Animation — Choose the right format for the job. Compare GIF, WebM and MP4 on quality, file size and where each one belongs.
• ▸Getting Started with FrameAnim — A tour of the editor — projects, canvas size, tools, the timeline, playback, onion skinning and saving — then your first animation, step by step.
• ▸Using the Lasso & Transform Tool — Select part of a drawing with a freehand loop, then move, scale and rotate it — the fastest way to animate limbs, props and repeated poses.

The full list, including the guides still being written, lives on the tutorials hub. You can also browse the examples to see what the editor produces before you open it.

How FrameAnim is paid for

The editor is free with no paid tier, no watermark, and no export limit. It is funded by advertising shown on the site. We keep ads off the drawing canvas itself, because a banner next to your onion-skin frames would make the tool worse.

Advertising partners set their own cookies, and you can turn off personalised ads at any time. The privacy policy explains who those partners are and links to the opt-out controls. What it does not involve is your artwork: your frames stay in your browser and are never shared with advertisers.

Tell us what is missing

Most of what has been added to FrameAnim started as somebody describing the thing they were trying to draw when they hit a wall. If a tool you keep reaching for is not here, or a tutorial step does not match what you see on screen, write to us through the contact page. Specific reports — which browser, which project size, what you expected — are the ones that turn into fixes.