Drag to move
How to use Animata
Welcome to Animata, a frame-by-frame animation tool built entirely for your browser!
🖌️ Drawing & Frames
- Use the Pen and Eraser tools to draw on the canvas. Change colour and width in the sidebar.
- Add new frames using the dashed button in the timeline at the bottom.
- The previous frame is shown slightly transparently (onion skinning) to help you align your drawings.
- Use the timeline to select, review, and delete individual frames.
🗂️ Layers (Frame vs Background)
- Toggle the Layer button at the top left.
- Layer: Frame edits only the currently selected frame in the timeline.
- Layer: B.G. allows you to draw a persistent background that stays the same across all frames.
🛠️ Advanced Tools
- Text: Click the canvas to spawn a text box. Drag it, change its colour/font, and click Stamp to apply.
- Pan & Zoom: Use the Pan/Zoom tools, or simply use a two-finger pinch and drag on touch screens to navigate the canvas.
- Image BG: Upload an image using the top toolbar. Adjust its scale and position in the sidebar to use as a reference or setting.
🎬 Playback & Export
- Adjust the FPS slider at the top to change the speed of your animation in real-time.
- Click Play to preview your work.
- Click the purple Export Video button to save your animation as a WebM video file.
- Use the Save and Load buttons to keep your project files safe as JSON.