Animation in Digital Comics

Animation is a special affordance of digital comics. Print comics may emulate motion (e.g., flip books, lenticular printing), but it’s expensive and time-consuming to reproduce. In digital publishing, duplicating an animated image costs the same as duplicating a static image. As a result, motion has become a common element in modern digital comics.

While it can still be time-consuming to design animated images, most modern digital art-making programs can produce gifs. Gifs (graphic interchange format) are the only truly well-supported digital image type that can include, and loop over, multiple frames. Many programs can also publish video files, but these are much larger and more difficult to control online. Animated images can be incorporated into digital comics pages the same way static panels might be.

Design considerations

Motion drastically changes the composition of a comic page. Like a bright color on an otherwise black and white image, it commands attention and may distract from other elements. To use motion effectively, it must be implemented thoughtfully. Here are a few important things to consider when adding animation to a comic.

Representation of time

hotel california animated title
Hotel California digital cover

Animation happens over discreet, regular intervals of time (e.g., 30 frames per second), but comics are read at the pace of the reader. What’s more, unlike a page of prose, a reader may absorb each panel multiple times as they take in the surrounding page composition as well as each individual panel. As cartoonists, we can influence the passage of reader time through page design, negative space, panel size, and other tools, but we cannot control when a reader encounters certain elements.

This unique passage of “reader time” forms a special relationship between the reader and the text. When we incorporate animation into a comic, we run a great risk of disrupting that special relationship. Pay special attention to how animations affect the flow of time across your panels, pages, and story. Avoid animating dialogue or narrative boxes, or otherwise interfering with the reader’s ability to read at their own pace.

Autoplaying vs user-activated

Looping action in Take It: A visual history of the Los Angeles Aqueduct

Animated gifs on webpages autoplay by default—unlike videos, which require special permissions from the user’s browser/device. Autoplay is most common for animated digital comics, and works well in most page compositions if thoughtfully designed.

When a cartoonist codes their own digital comics, they may have the opportunity to play user-activated animations. This means listening for a specific user behavior (e.g., clicking, hovering, scrolling, etc.) and playing an animation as a result. This device can be very useful for giving the reader narrative agency or adding feedback as a “reward” for reader behavior.

When incorporating user-activated animations, make sure to consider alternative outcomes, in case a reader cannot perform the action (for example, there is no “hover” state on a touch screen interface). Make sure your story is not stalled or broken if the reader does not perform the expected behavior.

Loop vs single-play

Polymorphic action in How to Protect Yourself Against Sphearphishing

In digital comics, seamlessly looping animations require the lowest design overhead. In the background, looping, ambient animations are excellent mood-builders and can add powerful dimension to a page. Subtle, natural movement like light, wind, or water is a great place to start.

In the foreground, looping animation can be thought of as analogous to polymorphic action. Neil Cohn defines polymorphic action as “show[ing] a single entity repeated in multiple positions of an action while remaining in a single encapsulated frame.” Animated elements in an otherwise static panel build on this comics tradition.

Single-play animations are typically only effective if they are user-activated. When a single-play animation is not initiated by the reader, it grounds that element in “real time,” which will almost certainly not align with “reader time.” However, when designed with “reader time” in mind, single-play user-activated animations can be great immersive narrative tools. They may also provide valuable feedback for other narrative actions readers may take within a digital comic.

A word of caution:

Because it commands attention, motion can be overwhelming! Avoid animating more than 20%-30% of a page, as this makes a page difficult to fully absorb. Make sure that motion is adding to, not detracting from, your narrative.

Finally, bear in mind that flashing lights may cause seizures, migraines, or other health problems for some readers. If you use rapid, high-contrast, or flashing gifs, add a warning to the top of your page so readers can make informed decisions about when or where to read your comic.

Have fun!

Motion is a really exciting, ground-breaking tool for digital comics. Experiment with how this can drive sequential narratives and have fun!

More animated comics

I used my own work as examples in this post to avoid republishing other work without permission. Here are some more excellent animated comic examples:

For more digital comics, check out my ongoing article collecting the Digital Comics Ouevre.

More Reading

Motion in comics may be new, but depicting time via a sequential images is as old as art-making itself! Here are a few great reference texts I found helpful while writing this post:

Digital Comics Oeuvre

A non-exhaustive and highly disorganized list of unique digital storytelling largely accomplished through comics.

Standalone Comics

Collections

Comic-like games

Stories told using “Juxtaposed pictorial and other images in a deliberate sequence, intended to convey information and/or produce an aesthetic response in the viewer” (Scott McCloud, Understanding Comics), but with greater focus on user-participation and game-like mechanics.

  • The Wolf Among Us (Telltale Games, 2013) Digital comic thriller based on the award-winning Fables comic books (DC Comics/Vertigo).
  • The Empty Kingdom (Merlin Goodbrey, 2014) Your kingdom lies empty before you; all your subjects fled; all their stories told. And yet you take up your sword. And yet you don your crown.
  • Reigns: Her Majesty (Devolver Digital, 2017) Greed and jealousy still conspire against the benevolent queen. Outwit and outlast those that would seek to depose you and your husband by swiping left or right, making just (or unjust) decisions on all manner of royal matters.
  • Framed 2 (Loveshack Entertainment, 2017) Rearranging the panels of an animated comic book to alter the order of events and change the outcome from disaster to success.