While creating the Happy New Year edition issue of the newsletter, I decided that it might be cool to animate the accompanying image.
Ordinarily, I'd use SVG and CSS for this. I've used both for animation elsewhere on this site. Unfortunately, email support for SVG and CSS is not very good. So instead, I turned to that classic format: the animated GIF.
I've created animated GIFs using Fireworks back when it was owned by Macromedia. I've created them with ffmpeg by exporting frames from video files. But I've never created one “from scratch” by stitching together my own frames.
As it turns out, it's very easy to do. You'll just need a couple of tools: the image editing software of your choice and ImageMagick.
You may already have it ImageMagick installed. Here's how to check:
- Open a terminal window. MacOS users can use Terminal.app. Ubuntu Linux users, use Ctrl + Alt + T to open one.
convertat the prompt. If ImageMagick is installed, you'll see a copyright notice and a list of commands. Otherwise you'll see
command not foundor something similar.
If you do not have ImageMagick installed, install it. On macOS, you can install it with Homebrew.
brew install imagemagick
Or, if you prefer, use MacPorts.
sudo port install imagemagick
Debian/Ubuntu users use the following:
sudo apt install -y imagemagick
-y flag is optional, and means “Yes.” Passing it will skip the
apt confirmation prompt.
Note for Windows users: I haven't used Windows for the better part of this millennium. There are binary downloads of ImageMagick available for Windows. You'll have to figure out how to use them on your own.
Now you're ready to stitch together some image frames.
How to create image frames
Create your image frames using the software of your choice. Each frame should have the same dimensions. I used Sketch to create my images, and used a separate artboard for each frame. For other software packages, such as Acorn, you may need to use separate layers or separate files.
Export each image frame to a bitmap format such as GIF, PNG, or JPEG. Saving them to the same directory makes things easier to manage. I'm using the phrase image frame here because we'll turn them into frames, but they're just separate image files. Which format you use doesn't matter much; ImageMagick will convert them to GIF.
Once you've exported your frames, navigate to the directory where you've saved them. Then run the
convert command to stitch your images together. For example:
convert -delay 100 -loop 5 -dispose previous start.png end.png iamanimating.gif
-delay flag indicates how many hundreths of a second the GIF should pause before displaying the next frame. In this case, the value is
100, or one second. Animations can cause seizures in some viewers. One second is well above the safety threshhold to avoiding triggering seizures in most cases.
Note: The World Wide Web Consortiums Web Content Accessibility Guidelines say that content should not flash or blink more than three times per second. This works out to a
-delay value of 34, or thirty-four hundredths of a second.
-loop flag indicates how many times the GIF should repeat. A value of 0 (
-loop 0) will cause your GIF to loop infinitely. Here, I've chosen to have it repeat five times. Five times is enough to catch the viewer's attention, without being an ongoing distraction on the page.
-dispose, indicates what should happen when the frame changes. In this case,
-dispose previous hides the prior frame. Without
-dispose previous, you'd end up with the mess in Figure 1.
The next three bits of the command indicate the paths to our input and output files:
end.png. Both files will be stitched together to form
You can also pass a wildcard argument — e.g.
*.png — for the list of input files. If you do so, be aware that ImageMagick will assemble those images in alphanumeric order. A file named
gifframe10.png will be inserted before
Even though it's more verbose, I recommend specifying the list of input files in the order you'd like them to appear. You can include a file twice within the list if you'd like it to appear more than once in the animation.
ImageMagick is far more powerful than what I've covered here. It's also very well documented. Be sure to read the documentation Animation Basics documentation, and the section on how to optimize your animated images.