About This Module
Simple GIF Animator lets you upload or hand-draw animation frames, preview playback with onion skinning, and export as a sprite sheet or individual frame. It is free, runs entirely in the browser, and requires no account or plugin installation.
What Is Simple GIF Animator?
Simple GIF Animator is a browser-based frame-by-frame animation tool. You can upload a sequence of images as frames or draw each frame from scratch using built-in pen, eraser, fill, line, rectangle, and ellipse tools. Onion skinning shows ghost images of adjacent frames so you can align motion smoothly. Playback controls let you preview the animation at adjustable frame rates, and a seek slider provides instant access to any frame. Export options include a horizontal sprite sheet combining all frames and single-frame PNG downloads.
How It Works
Choose between Draw mode and Upload mode. In Draw mode, set a canvas size, create blank frames, and paint on each one using the brush tools with adjustable size, color, and opacity. Enable onion skin to see the previous, next, or both adjacent frames as translucent guides. In Upload mode, select multiple images at once to populate the frame strip. Adjust playback speed using FPS or per-frame millisecond delay, then hit Play to preview the animation. Add optional overlay text that appears on every frame. When finished, download a sprite sheet for use in games or CSS animations, or export a single frame as PNG.
Best Use Cases
- Pixel art animation: Draw frame-by-frame pixel sprites with onion skinning to create smooth character walk cycles or UI micro-animations.
- Game sprite sheets: Export a horizontal sprite strip that plugs directly into CSS sprite animation or game engine importers.
- Storyboard previews: Upload sequential storyboard panels and play them back at low FPS to evaluate scene pacing before production.
- Educational demonstrations: Animate step-by-step diagrams or process illustrations for tutorials, presentations, or documentation.
Fields and Input Explanations
- Upload images (multi-select): Select multiple image files (JPG, PNG, WEBP) to use as the animation frames; the order of selection sets the frame sequence.
- Width: Set the canvas width in pixels for the animation.
- Height: Set the canvas height in pixels for the animation.
- Tool: Select the active drawing tool for annotating or editing the current frame (e.g., Pen, Eraser, Fill).
- Size: The brush or pen size for drawing on individual frames.
- Color: The active color for the brush or fill tool.
- Opacity: Toggle to enable opacity control for the drawing overlay.
- Enabled: Toggle to enable or disable drawing mode on the current frame.
- Opacity %: The transparency percentage for the brush or overlay (0 = fully transparent, 100 = solid).
- Show: Toggle visibility of a specific frame or layer in the animation preview.
- Speed mode: Select the playback timing method — uniform FPS across all frames, or per-frame custom timing.
- FPS: Frames per second for playback in FPS mode; higher values produce faster animation.
- Size (px): The pixel dimensions of the drawable canvas area within the editor.
- Frames Input: The number of frames in the animation sequence; add or remove frames here.
- Draw W: Custom drawable canvas width in pixels for per-frame artwork.
- Draw H: Custom drawable canvas height in pixels for per-frame artwork.
- Draw Tool: The drawing tool active for per-frame artwork (Pen, Eraser, or Shape).
- Brush Size: Pixel size of the drawing brush for frame-by-frame artwork.
- Brush Color: The active color for the drawing brush.
- Brush Opacity: Transparency of the brush strokes (0 = transparent, 100 = fully opaque).
- Onion Toggle: Enable onion skinning to display ghost images of adjacent frames, helping align artwork across frames.
- Onion Opacity: Transparency level of the onion skin ghost frames.
- Onion Mode: Select whether onion skin shows preceding frames, following frames, or both simultaneously.
- Speed Value: The numeric playback speed value; its interpretation depends on the selected speed mode.
- Seek Slider: Drag to scrub through the animation timeline and preview any specific frame.
- Overlay Text: Optional text rendered as a persistent overlay across all frames of the animation (e.g., watermark, title card).
- Overlay Color: The color of the overlay text.
- Overlay Size: The font size of the overlay text in pixels.