Slack GIF Creator

Creates animated GIFs optimized for Slack with validators for size constraints and composable animation primitives.

Download this Skill

npx degit LangbaseInc/agent-skills/slack-gif-creator my-slack-gif

Overview

Create engaging animated GIFs specifically optimized for Slack's file size and dimension constraints.

Slack Constraints

File Size

Maximum: 5MB
Recommended: < 2MB for faster loading
Optimal: < 1MB for best performance

Dimensions

Maximum: 2048x2048 pixels
Recommended: 480x270 (16:9) or 480x480 (1:1)
Optimal: 360x360 for reactions

Frame Rate

Recommended: 10-15 FPS
Maximum: 30 FPS (increases file size)

Features

Size Optimization

Automatic compression
Frame optimization
Color palette reduction
Dimension optimization
Quality vs size balancing

Animation Primitives

Fade in/out
Slide transitions
Rotate effects
Scale animations
Text animations
Color transitions

Creation Workflow

1. Design Animation

Plan your animation sequence and timing

2. Generate Frames

Create individual frames or use composable primitives

3. Optimize

Apply compression and optimization

4. Validate

Check file size and quality

5. Export

Save optimized GIF for Slack

Common Use Cases

Reaction GIFs

Thumbs up/down
Applause
Celebration
Confused reactions
Approval animations

Status Indicators

Loading spinners
Progress bars
Success/error states
Working/busy indicators

Team Communication

Welcome messages
Milestone celebrations
Fun announcements
Code review reactions
Deploy notifications

Animation Examples

Simple Fade

Frame 1: opacity 0%
Frame 2: opacity 25%
Frame 3: opacity 50%
Frame 4: opacity 75%
Frame 5: opacity 100%

Bounce Effect

Frame 1: y=0
Frame 2: y=-20
Frame 3: y=-30
Frame 4: y=-20
Frame 5: y=0

Rotate Spin

Frame 1: rotate 0°
Frame 2: rotate 90°
Frame 3: rotate 180°
Frame 4: rotate 270°
Frame 5: rotate 360°

Optimization Techniques

Reduce Colors

Use limited color palette
Dithering for smooth gradients
256 colors or less

Optimize Frames

Remove duplicate frames
Reduce frame count
Increase frame delay
Use frame disposal methods

Compress Dimensions

Scale down resolution
Crop unnecessary areas
Use optimal aspect ratios

Quality Settings

Balance quality vs size
Use lossy compression
Optimize transparency

Tools & Libraries

Node.js

gifencoder - GIF creation
sharp - Image processing
canvas - Frame generation
jimp - Image manipulation

Python

Pillow (PIL) - Image processing
imageio - GIF creation
moviepy - Video to GIF

Validation Checklist

Best Practices

Keep animations short (2-5 seconds)
Use simple color schemes
Optimize for mobile viewing
Test in Slack before sharing
Consider accessibility
Use clear visual hierarchy
Avoid rapid flashing
Make text readable

Integration with Slack

Upload via API

const { WebClient } = require('@slack/web-api');
const fs = require('fs');

const web = new WebClient(token);
await web.files.upload({
  channels: channelId,
  file: fs.createReadStream('animation.gif'),
  title: 'Custom Animation'
});

Slack Bot Commands

app.command('/create-gif', async ({ command, ack, say }) => {
  await ack();
  const gif = await createGIF(command.text);
  await uploadToSlack(gif);
});

Examples

Loading Spinner

360x360, 10 FPS, < 500KB

Celebration

480x270, 15 FPS, < 1MB

Approval Stamp

400x400, 12 FPS, < 800KB

Code Deployed

480x480, 10 FPS, < 1MB

Skills