Animated GIF Maker

Autoplaying silent loops are still the most reliable way to demonstrate a UI interaction inside a GitHub Pull Request, documentation page, email newsletter, or Notion doc where full video players cannot embed. Use this animated GIF maker in your browser to convert an MP4/WebM/MOV video clip or a sequence of PNG/JPG images into a quantized GIF - complete with frame-by-frame delay tweaks, Reverse and Ping-Pong (Boomerang) loop modes, resolution presets, and custom text captions.

When an animated GIF beats an embedded video player

Markdown README files on GitHub, Jira descriptions, Confluence pages, and email clients block <video> tags and JavaScript players for security reasons, but they render standard <img> tags pointing to a .gif file inline on every device without requiring the reader to click a play button.

Two workflows come up constantly when building GIFs:

• Video Clip to GIF: You record a 10-second screen capture of a new dropdown animation or bug reproduction and want to slice out a 5-second window, scale it to 480px or 640px wide, and loop it seamlessly.
• Image Sequence to GIF: You export 8 distinct wireframe states, product angles, or frame-by-frame illustrations from Figma or Photoshop and want to stitch them into an animation where Frame 1 holds for 800ms, Frames 2–7 move at 120ms, and the final frame holds for 1,500ms so the viewer can read the result.

How to use the animated GIF maker step by step

Method 1: Convert a Video Clip (MP4, WebM, MOV) into a Smooth Looping GIF

1. Load your video recording: Drop an MP4, WebM, or MOV clip into the workspace to open the video frame sampler.
2. Select the time window and sample FPS: Set the Start Time, Clip Duration (1s to 15s), and Sample Rate (5 to 24 FPS) (10–15 FPS is the sweet spot for crisp GitHub and documentation loops without bloated file sizes).
3. Configure loop style, width, and captions: Pick Normal Forward, Reverse, or Ping-Pong (Boomerang) loop mode, select an output width (360px, 480px, or 640px), optionally add a Top / Center / Bottom Text Caption, and click Generate & Download GIF.

Method 2: Stitch Multiple Static Images (PNG, JPG, WebP) into a Frame-by-Frame GIF

1. Drop your image sequence: Select or drag multiple PNG, JPG, or WebP illustrations, UI state mockups, or burst photos into the upload zone.
2. Arrange the storyboard & per-frame timing: In the interactive storyboard grid, drag cards to reorder frames, delete unwanted blinks, and set custom millisecond hold times (ms) on key frames (for example, holding the final result frame for 1500 ms before looping).
3. Preview and compile: Watch the live canvas playback to verify pacing, then click Generate & Download GIF to encode the 256-color quantized animation locally.

Storyboard timeline, Ping-Pong loops, and color quantization

Because the CompuServe GIF89a specification is limited to 256 colors per frame, a naive GIF encoder produces grainy banding or 30 MB files. This studio combines temporal frame editing with adaptive color palette quantization.

• Dual Video Sampler & Multi-Image Storyboard: Extract frames automatically from any video clip at your chosen FPS, or upload discrete PNG/JPG images and mix them on the same timeline.
• Per-frame millisecond timing & reordering: Click any frame card in the storyboard to shift its position left or right, remove blink frames, or set a custom hold delay (for example, holding the last frame of a tutorial for 1500 ms before the loop restarts).
• Normal, Reverse, and Ping-Pong (Boomerang) loops: Selecting Ping-Pong automatically plays frames $1 \to N$ followed by $N-1 \to 2$, creating a continuous seamless oscillation with no jump cut at the loop boundary.
• Built-in Caption Banner overlay: Stamp high-contrast white-on-dark or bordered meme/instructional captions at the Top, Center, or Bottom of the animation without opening a separate image editor.
• Live animated preview canvas: Watch your exact frame rate, loop direction, and caption overlay play back in real time before compiling the binary .gif file.

Worked example: turning a 6-second UI recording into a 1.35 MB GitHub GIF

Suppose you record a 6-second screen capture (Dark-Mode-Toggle.mp4, 1920 x 1080, 14.2 MB) showing a theme transition in your web app, and want to embed it in a GitHub Pull Request where images must be under 5 MB.

1. You load Dark-Mode-Toggle.mp4 into the GIF Maker and set Clip Duration = 4.0s and FPS = 12 (extracting $4 \times 12 = \mathbf{48\text{ frames}}$ at 83 ms per frame).
2. You select Output Width = 480px (Standard Web) and Loop Direction = Ping-Pong (Boomerang) so the animation smoothly toggles from Light Mode to Dark Mode and back to Light Mode seamlessly.
3. You type Theme Toggle · Zero Flash in the Overlay Caption box positioned at the Bottom.
4. Clicking Generate & Download GIF quantizes the palette and encodes Dark-Mode-Toggle.gif at 1.35 MB - a crisp, self-looping animation that is 90.5% smaller than the source video.

How to keep GIF file sizes small and sharp

Because GIF uses lossless LZW compression over 8-bit indexed color frames rather than modern inter-frame video motion vectors, three factors multiply to determine your final file size: Frame Count $\times$ Pixel Area $\times$ Color Complexity.

• 10 to 15 FPS is the sweet spot for UI and reaction GIFs: Going from 12 FPS to 24 FPS doubles the number of frames (and nearly doubles the file size) with very little perceptual gain for screen recordings.
• Use 480px for chat/docs and 640px for hero demos: A 480px-wide frame has 44% fewer pixels than a 640px frame.
• Pause on the final frame instead of recording 3 seconds of static video: If you want the viewer to look at the final state of a chart for 2 seconds, delete the trailing duplicate video frames from the storyboard and set the final single frame's delay to 2000 ms. That gives you a 2-second pause at the cost of zero extra bytes!

Local browser processing

Every video frame extraction, canvas caption render, color quantization pass, and GIF89a binary compilation executes locally inside your browser tab. Your video clips and photos are never uploaded to any server.

Balancing frame rate (fps), pixel width, and palette dithering

Because the GIF89a specification uses an indexed 256-color palette per frame rather than modern inter-frame video compression (H.264 / VP9), three parameters control 95% of your output file size:

• Frame rate (10–15 fps sweet spot): A 30 fps GIF stores twice as many full frames as a 15 fps GIF and is nearly twice as large. For UI screen recordings, product walkthroughs, and reaction loops, 10 to 15 fps looks smooth while cutting megabytes in half.
• Canvas width (480 px–640 px): Reducing width from 1280 px to 600 px reduces the number of pixels per frame by 78% (1 - (600/1280)^2).
• Clip duration (2–6 seconds): Trimming dead air at the start and end of a clip keeps loops snappy for GitHub pull requests, Slack messages, and documentation pages.

Related video and image utilities

Need to convert a GIF back into an MP4 or WebM video - or transcode long videos? Open the Video Converter or Video Compressor & Trimmer. To batch-convert static images across PNG, JPG, WebP, and AVIF, use the Image Converter, stamp logos onto videos in the Watermark Studio, or read our guide on how to use the Animated GIF Maker.