About

Animated GIF banners with scrolling text remain one of the most compatible image formats across email clients, forums, and legacy web platforms. Unlike MP4 or WebP animations, GIF89a is universally rendered without JavaScript or video decoders. This tool constructs the binary GIF file entirely in your browser using the LZW compression algorithm specified in the GIF89a standard. No server upload occurs. Frame count is computed as (W + T_w) ÷ δ, where W is canvas width, T_w is rendered text width, and δ is the per-frame pixel shift. Choosing too small a δ inflates file size exponentially. A 400px wide banner at δ = 2px can produce over 300 frames.

The tool approximates smooth motion by adjusting the inter-frame delay. GIF frame timing has a minimum resolution of 10ms (100fps theoretical maximum), but most renderers clamp values below 20ms to ~100ms. This tool defaults to 50ms per frame for reliable playback. Note: anti-aliased text rendering against non-white backgrounds may introduce dithering artifacts due to the 256-color palette constraint of GIF.

Formulas

The total number of frames required for one complete scroll cycle depends on direction. For horizontal scrolling:

N_frames = W + T_wδ

For vertical scrolling, replace W with canvas height H and T_w with total text block height T_h.

N_frames = H + T_hδ

The effective animation duration for one loop:

t_total = N_frames × d

Where d is the inter-frame delay in milliseconds. Estimated file size scales with:

S ∝ N_frames × W × H × log₂(C)

Where W = canvas width in pixels, H = canvas height in pixels, T_w = rendered text width measured via Canvas measureText, δ = pixel shift per frame (scroll speed), d = frame delay in ms, C = number of colors in the palette, S = approximate output size in bytes.

LZW compression encodes pixel index streams using variable-length codes starting at (log₂(C) + 1) bits, growing up to 12 bits maximum per the GIF specification.

Reference Data

Parameter	Recommended Range	Effect on File Size	Notes
Canvas Width	200 - 600px	Linear	Wider = more frames for full scroll
Canvas Height	30 - 120px	Linear	Match font size + padding
Font Size	14 - 72px	Indirect (taller canvas)	Larger text needs taller canvas
Scroll Speed (δ)	1 - 8px/frame	Inverse (fewer frames)	δ = 1 is smoothest but largest
Frame Delay	30 - 100ms	None (metadata only)	Below 20ms is clamped by browsers
Color Depth	2 - 256 colors	Logarithmic	Fewer colors = smaller LZW output
Text Length	1 - 200 chars	Linear (more frames)	Longer text = wider rendered width
Direction: Left	-	-	Classic marquee style (most common)
Direction: Right	-	-	Reversed reading; used for RTL languages
Direction: Up	-	-	Credits-style vertical scroll
Direction: Down	-	-	Ticker-tape style
Loop Count	0 (infinite)	None	GIF NETSCAPE extension; 0 = forever
Background: Solid	-	Best compression	Uniform pixels compress well with LZW
Anti-Aliasing	On by default	Increases palette usage	Canvas fillText applies subpixel AA
Max File Size (practical)	< 5MB	-	Most platforms reject larger GIFs

Frequently Asked Questions

GIF file size is proportional to frame count multiplied by pixel area. A 400px wide canvas with scroll speed δ = 1px/frame and 100-character text can exceed 500 frames. Increase δ to 3-5 px/frame to reduce frame count by 60-80%. Also, solid backgrounds compress significantly better than gradients due to LZW's dictionary-based encoding favoring repeated byte sequences.

The GIF89a spec stores frame delay in hundredths of a second (centiseconds). Most browsers and image viewers clamp delays below 20ms to approximately 100ms. The preview uses requestAnimationFrame which runs at the display's refresh rate (typically 16.7ms). For consistent playback, keep frame delay at 40ms or above.

The tool uses system fonts available in the browser's Canvas 2D context. Web fonts (Google Fonts, etc.) require loading via FontFace API before rendering. This tool provides common system font families (Arial, Georgia, Courier New, Verdana, Impact, Comic Sans MS) that are available without network requests. The Canvas fillText method renders whatever font the browser resolves.

LZW (Lempel-Ziv-Welch) builds a dictionary of pixel sequences. It starts with a code table of size 2^(minCodeSize) entries for individual palette indices plus CLEAR and EOI codes. As it reads pixel streams, it extends the dictionary with new sequences and outputs the code for the longest known prefix. Code width grows from (minCodeSize + 1) bits up to 12 bits. When the table fills (4096 entries), a CLEAR code resets it. This is why solid-color regions compress well - long runs map to single codes.

That is the intended use case. The text starts fully off-screen on one side and scrolls until it exits the opposite side. The rendered text width T_w is measured using Canvas measureText().width. Total travel distance equals W + T_w for horizontal scrolling. If your text is extremely long (>2000px rendered width), expect hundreds of frames and proportionally larger files.

Canvas fillText applies sub-pixel anti-aliasing, producing intermediate color values between the text color and background. GIF supports only 256 indexed colors per frame. The encoder maps each pixel to the nearest palette entry. With a minimal palette (2-4 colors), anti-aliased edge pixels may snap to unexpected colors. Using high-contrast color combinations (dark text on light background) minimizes visible artifacts.