Show your projects in motion with animated GIFs

Is it a GIF? Or is it, you know, a GIF? While there is no shortage of opinions on how to pronounce it, there is one simple truth most of us can agree on: These perpetually looping frames warm a special place in our collective hearts.

Forged in Angelfire around the dawn of peanut-butter-jelly time and field-tested in various Geocities, animated GIFs continue to thrive across the internet. These days, they are far more than just an efficient format for rendering rug-cutting infants or marking semi-permanent construction zones on webpages. They’ve evolved into an art form, a helpful way to express tone online, and, for the purposes of this post, a powerful tool for showing people the things your software can do in their hands.

At GitHub, we get to create a lot of GIFs that showcase our work. There are many tools, tricks, and techniques that can help you produce high quality animations of your projects. These animations can add polish and clarity to your documentation, capture the essence of a new feature, or even demonstrate how to use your software in a way that words aren’t best suited to articulate. Below you’ll find the processes and tools GitHub uses for many GIFs that appear on this blog and across social media.

Do you really need a GIF?

Creating a high-quality animation takes significant time and energy. Before jumping in and capturing any footage of your screen, taking the time to assess your needs can save you lots of heartache. There are a handful of visual aids that can help you demonstrate your software, including annotated still images, diagrams, video walkthroughs, and yes, animated GIFs—each with its own benefits and drawbacks. Like so many other decisions in software development, it’s about choosing the right tool for the job.

Composition

If an animated GIF is the perfect fit, it’s time to start planning. A good first step is deciding where you want people to see it. Different social media platforms have different constraints that you can use to your advantage, or at least be aware of, when creating your animation. For instance, GIFs on the GitHub blog will often have different dimensions and compression settings than GIFs for the same feature on Twitter. These differences can affect the content and overall flow of an animation, so it’s helpful to consider them up front.

As you plan your animation, think of it in terms of telling a story about your software. Software demonstration and screencasting have a long history, so it’s easy to only think in terms of full-screen images and single shot animations. Instead, challenge yourself to break the story for your animation apart into separate shots and plan out each one separately. When should the viewer see the entire screen? What action should they see up close? In addition to making your GIF more movie-like, it helps modularize your animation and prevents the stress of having to choreograph everything into one long take. Capturing the same footage multiple times will come in handy when editing everything, so it’s helpful to optimize for modularity and repeatability.

Recording

There are lots of great tools for recording screen footage. We use a combination of commercial and open source software, including QuickTime Player, ScreenFlow, Kap, and LICEcap. Each has advantages in certain areas depending on the type of animation you need. Capturing your project at its best, however, is less about the software recording your screen and more about presenting a rich and engaging user experience.

Taking time to dress your UI before recording can create a much more realistic backdrop for your animation. In filmmaking, this is called mise-en-scène, and it can refer to things like scenery and props. For an animated GIF, this might mean seeding your app with content that reinforces the scenario you are demonstrating, but even random, realistic content is better than pasting in lorem ipsum text or names like “example for demo.”

In our GIFs, we’ll often use live content and then modify it to refine things, simplify the color palette, or remove identifying information. This type of DOM-hacking is possible with the help of the developer tools packaged with your browser. Manual changes to a rendered web page can be time-consuming, but you can take advantage of augmented browsing tools like Greasemonkey or Tampermonkey to program DOM changes into a script. This approach removes a lot of the friction when you need to repeat a recording.

When the cameras are rolling, be intentional with your actions. Plan each click. Move the mouse in a direct path to its destination. Make editing easier for yourself by knowing in advance what keystrokes you’ll make.

Editing

As with screen-capture software, tools for editing your footage abound. For this task, the best tool for the job is often the one you’re most comfortable with. The most effective animations are usually 7-10 seconds and highly focused, so the editing process is an opportunity to really fine-tune your footage. In an iterative approach, the first pass assembles all of the shots. Subsequent passes clean up typos, adjust speed, and remove extraneous content. There is a final pass to add motion that directs the viewer’s attention and transitional adjustments that help create a more seamless loop for the GIF.

Exporting

Depending on the software you’ve used to record and edit your footage, there may be an option for exporting your animation directly to GIF. Sometimes this is all you need to do. Exporting is often a careful balancing act between image quality and file size, however, so this approach may not always yield the result you need for the platform where you’re sharing the animation. There are lots of great dedicated tools for GIF creation, including open-source projects like Gifsicle and Gifify, as well as proprietary products like GIF Brewery.

Many of the GIFs featured on the GitHub blog and social media begin as 24fps video files. This frame rate, combined with a bit of motion blur, helps give the action in the animation a more cinematic feel. Those videos get imported into Adobe Photoshop, where they can be tweaked frame-by-frame. There are a variety of helpful tutorials about this process available online. From Photoshop, it’s possible to compare the resulting file size and image quality of multiple export settings combinations at once. This helps show you where you have room for a bit of extra dithering or how a more limited color palette will hold up.

If you find yourself wanting to squeeze down the file size of your animation, some helpful levers tend to be (in no particular order):

• Reducing its dimensions
• Shortening its duration
• Simplifying its color palette
• Reducing the amount of dithering during export
• Eliminating superfluous motion in the animation

Try one out

High-quality animations can really let people connect with your software project by showing them what it’s like to interact with it. That connection, however, is as much about the engaging experience you paint for them as it is about the price or complexity of your GIF-creation tools. You may already have the makings of a pretty solid GIF studio on your workstation already. If you’re missing something or need a particular functionality, take a look at some of the GIF-related projects linked from this post or browse the screen-recorder topic on GitHub.

Whether you’re looking to help people learn something in a GIFfy or create the GIF that keeps on GIFing, there are lots of great tools to help you tell your story.

Written by

Allen Smith

@loranallensmith