Skip to content

Animation and GIF Creation Guide

Purpose

Guidelines for creating animated GIFs and videos to demonstrate interactive features in AudioLab documentation.

When to Use Animations

Good Use Cases ✅

  • Demonstrating UI interactions (drag, click, hover)
  • Showing real-time parameter changes
  • Visualizing audio waveforms/spectrums
  • Quick feature demonstrations
  • Loading/processing states
  • Transition animations

Poor Use Cases ❌

  • Static information (use screenshot instead)
  • Long tutorials (use video instead)
  • Complex workflows (use video with narration)
  • Anything requiring audio (use video)

Animation Types

1. Screen Recordings (GIF)

Use for: UI interactions, clicks, drags Duration: 2-10 seconds Tools: ScreenToGif, LICEcap

2. Code Animations

Use for: Showing code changes, refactoring Duration: 3-8 seconds Tools: Carbon.now.sh (static) + manual animation

3. Data Visualizations

Use for: Audio waveforms, FFT displays, meters Duration: 1-5 seconds (looping) Tools: Processing, JavaScript Canvas, C++ with ImGui

4. Diagrams/Illustrations

Use for: Explaining concepts visually Duration: 5-15 seconds Tools: After Effects, Principle, Rive

Technical Specifications

GIF Format

  • Resolution: 800x600 to 1200x900 (smaller than screenshots)
  • Frame Rate: 15-30 FPS (lower = smaller file)
  • Colors: 256 max (GIF limitation)
  • Optimization: Use lossy compression if needed
  • File Size: Target <2MB, max 5MB
  • Loop: Infinite or 3-5 times

Video Format (For Complex Animations)

  • Resolution: 1920x1080
  • Frame Rate: 60 FPS
  • Codec: H.264 (MP4) or WebM
  • Duration: <30 seconds
  • File Size: <10MB

Tools and Techniques

ScreenToGif (Windows, Free)

Best for: Quick screen captures to GIF

Recommended Settings: 

Recorder:
- Frame Rate: 20 FPS
- Size: 1000x750 (or smaller)

Editor:
- Delete unnecessary frames
- Reduce colors to 128-256
- Apply lossy compression (30-50 quality)
- Set loop count: Forever

Export:
- Encoder: FFmpeg
- Compression: High
- Quality: 90

Workflow: 1. Start recorder, select region 2. Perform action (click, drag, etc.) 3. Stop recording 4. Edit: trim, reduce colors, optimize 5. Export as GIF or video

LICEcap (Cross-platform, Free)

Best for: Simple, fast captures

Settings: 

- Max FPS: 15-20
- Record mouse: Yes
- AutoStop after: 10 seconds
- Paletted: 256 colors

Workflow: 1. Position window over area to capture 2. Click Record 3. Perform action 4. Stop (auto-stops after time limit)

Peek (Linux, Free)

Best for: Linux users

# Install
sudo apt install peek

# Record
# Set to GIF, 20 FPS, delay 0

FFmpeg (CLI, Advanced)

Best for: Converting videos to optimized GIFs

# Convert MP4 to GIF (optimized)
ffmpeg -i input.mp4 -vf "fps=20,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 output.gif

# Reduce file size (lossy)
ffmpeg -i input.gif -vf "scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" output_optimized.gif

Photoshop/GIMP (Manual Frame Editing)

Best for: Frame-by-frame animation, fine control

Workflow: 1. Import frames or video 2. Edit each frame as layer 3. Set frame delay (Timeline panel) 4. Export for Web (Save for Web & Devices) - GIF, 256 colors, Lossy 30-50

Optimization Strategies

Reduce File Size

1. Reduce Dimensions

1920x1080 → 800x600  (67% reduction)

2. Reduce Frame Rate

60 FPS → 20 FPS  (67% reduction)
30 FPS → 15 FPS  (50% reduction)

3. Reduce Colors

256 colors → 128 colors  (~30% reduction)
Full color → 64 colors   (~50% reduction, may degrade quality)

4. Trim Duration

  • Remove static frames at start/end
  • Cut to essential action only
  • Loop if action is repetitive

5. Use Lossy Compression

Tools: Gifski, gifsicle 

# gifsicle optimization
gifsicle -O3 --lossy=80 input.gif -o output.gif

Target File Sizes

  • Simple UI: <1MB
  • Complex UI: 1-3MB
  • Code Animation: <500KB
  • Data Viz: 1-2MB
  • Max (avoid exceeding): 5MB

Creating Effective Animations

Timing and Pacing

  • Intro pause: 0.5-1 second (orient viewer)
  • Action: Moderate speed (not too fast)
  • Result pause: 1-2 seconds (show result)
  • Loop delay: 1 second before restart

Focus and Clarity

  • Zoom in on important area (crop tight)
  • Slow down critical moments (adjust frame delays)
  • Highlight cursor or clicks (red circle, glow)
  • Clean background (close unnecessary windows)

Looping

  • Seamless loops: Ensure last frame matches first
  • Natural loops: Waveforms, meters, cyclic processes
  • Pause before loop: Give viewer time to process

Cursor Visibility

  • Enlarge cursor (150-200%) for small GIFs
  • Highlight clicks (ripple effect, circle)
  • Hide cursor if not interacting (static views)

Animation Examples

1. Parameter Change Animation

Scenario: Show filter cutoff knob being adjusted

Steps: 1. Start with knob at 500Hz 2. Slowly drag to 2000Hz 3. Show frequency response changing in real-time 4. Pause at end result 5. Loop (return to 500Hz)

Settings: - 800x600, 20 FPS, 5 seconds - Highlight cursor during drag - Use 256 colors

2. Code Refactoring Animation

Scenario: Show code transformation

Steps: 1. Show "before" code (2 seconds) 2. Highlight section to refactor (1 second) 3. Type replacement (3 seconds, sped up 2x) 4. Show "after" code (2 seconds)

Settings: - 1000x600, 15 FPS, 8 seconds - Use syntax highlighting - Reduce to 128 colors (text-friendly)

3. Waveform Display Animation

Scenario: Audio buffer visualization

Steps: 1. Generate waveform programmatically (C++/Python) 2. Export frames as PNG sequence 3. Combine into GIF with FFmpeg 4. Loop infinitely

Settings: - 800x400, 30 FPS, 3 seconds - Use clean, simple graphics - 64 colors (simple waveform)

Code-Generated Animations

Python + Matplotlib

import matplotlib.pyplot as plt
import matplotlib.animation as animation
import numpy as np

fig, ax = plt.subplots()
x = np.linspace(0, 2*np.pi, 100)
line, = ax.plot(x, np.sin(x))

def animate(i):
    line.set_ydata(np.sin(x + i/10))
    return line,

ani = animation.FuncAnimation(fig, animate, frames=100, interval=50, blit=True)
ani.save('sine_wave.gif', writer='pillow', fps=20)

JavaScript + Canvas

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let frame = 0;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw waveform
    ctx.beginPath();
    for (let x = 0; x < canvas.width; x++) {
        const y = Math.sin((x + frame) * 0.05) * 50 + canvas.height / 2;
        ctx.lineTo(x, y);
    }
    ctx.stroke();

    frame++;
    requestAnimationFrame(animate);
}

animate();

// Capture frames with ScreenToGif or similar

Processing

void setup() {
    size(800, 600);
    frameRate(30);
}

void draw() {
    background(0);
    stroke(255);
    noFill();

    // Draw animated waveform
    beginShape();
    for (int x = 0; x < width; x++) {
        float y = height/2 + sin((x + frameCount) * 0.05) * 100;
        vertex(x, y);
    }
    endShape();

    // Save frames (comment out for normal run)
    // saveFrame("frames/frame-####.png");
}

Embedding in Documentation

Markdown (MkDocs)

## Parameter Adjustment

![Parameter Knob Animation](../animations/parameter-knob.gif)

*Click and drag the knob to adjust frequency (500Hz - 20kHz)*

HTML (Custom Sizing)

<img src="../animations/parameter-knob.gif" alt="Parameter Knob" width="600">

With Fallback Image

<picture>
  <source srcset="animation.webp" type="image/webp">
  <source srcset="animation.gif" type="image/gif">
  <img src="static-fallback.png" alt="Parameter adjustment">
</picture>

Accessibility

Alt Text

Always provide descriptive alt text: 

![Animation showing filter cutoff parameter being adjusted from 500Hz to 2kHz, with real-time frequency response visualization](filter-cutoff.gif)

Pause/Play Controls

For longer animations, consider video format with controls: 

<video width="800" controls loop>
  <source src="parameter-demo.mp4" type="video/mp4">
  Your browser doesn't support video.
</video>

Reduced Motion

Respect user preferences: 

@media (prefers-reduced-motion: reduce) {
    .animated-gif {
        animation: none;
        /* Show static frame instead */
    }
}

File Organization

Directory Structure

var/animations/
├── raw/                    # Screen recordings (MP4/AVI)
├── edited/                 # Optimized GIFs
└── published/              # Final, web-ready
    ├── ui-interactions/
    ├── code-examples/
    ├── visualizations/
    └── tutorials/

File Naming

YYYY-MM-DD_feature-action_version.gif

Examples:
2025-01-15_parameter-knob-drag.gif
2025-01-15_waveform-visualization.gif
2025-01-20_code-refactor-example.gif

Quality Checklist

Before publishing: - [ ] File size <5MB (ideally <2MB) - [ ] Animation is smooth (no dropped frames) - [ ] Clearly demonstrates feature - [ ] Loops cleanly (if looping) - [ ] Duration is appropriate (not too long) - [ ] Alt text is descriptive - [ ] Optimized (colors reduced, compression applied)

Tools Summary

Tool Platform Cost Best For
ScreenToGif Windows Free General screen capture
LICEcap Win/Mac Free Quick simple captures
Peek Linux Free Linux screen capture
Gifski All Free GIF optimization
FFmpeg All Free Video to GIF conversion
Photoshop All Paid Frame-by-frame editing
After Effects All Paid Complex animations

References