Slack GIF Creator

Create custom animated GIFs for Slack emojis and reactions.

GIF Requirements for Slack

Technical Specifications

Dimensions:

• Recommended: 128x128 pixels
• Maximum: 256x256 pixels
• Square aspect ratio

File Format:

• GIF format required
• Animated GIF supported
• File size: Under 256KB for custom emoji

Animation:

• Frame rate: 10-15 fps
• Loop count: Infinite
• Duration: 1-3 seconds typical

Creation Process

1. Design Concept

Define the GIF:

• Purpose (reaction, emoji, illustration)
• Style (minimal, detailed, cartoon)
• Animation type (loop, one-shot, bounce)

Sketch Ideas:

• Thumbnail sketches
• Frame-by-frame breakdown
• Timing and rhythm

2. Frame Creation

Frame-by-Frame Method:

// Create individual frames
const frames = [];

// Frame 1
frames.push(createFrame1());

// Frame 2
frames.push(createFrame2());

// Frame 3
frames.push(createFrame3());

Onion Skinning:

• Show previous frame at reduced opacity
• Maintain consistency across frames
• Smooth transitions

3. Animation Assembly

Using Canvas:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 128;
canvas.height = 128;

// Draw each frame
frames.forEach((frame, index) => {
  setTimeout(() => {
    ctx.clearRect(0, 0, 128, 128);
    drawFrame(ctx, frame);
  }, index * 100); // 100ms per frame
});

4. Export as GIF

Using gif.js:

const gif = new GIF({
  workers: 2,
  quality: 10,
  width: 128,
  height: 128
});

// Add frames
frames.forEach(frame => {
  gif.addFrame(frame, { delay: 100 });
});

gif.render();

Popular GIF Types for Slack

Reactions

• Thumbs up/down
• Clapping
• Fire/flame
• Heart/love
• Laughing/crying

Emotions

• Happy/excited
• Sad/disappointed
• Surprised/shocked
• Confused/thinking
• Angry/frustrated

Actions

• Waving
• High five
• Celebration
• Facepalm
• Shrugging

Best Practices

• Keep file size small for fast loading
• Use simple designs for small dimensions
• Ensure animation loops smoothly
• Test in Slack before finalizing
• Consider accessibility (alt text)
• Use consistent style across emoji set