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
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
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
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:
- Heavy Lights of January by Boulet
- The Bloody Footprint by Lillie Carre
- When Darkness Presses by Emily Carroll
- Magical Game Time by Zak Gorman
- The Ocean is Broken by Stu Campbell
- Murat Nonstop Bar by Motiv
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:
- Understanding Comics by Scott McCloud
- Making Comics by Scott McCloud
- The Limits of Time and Transitions by Neil Cohn
- The Impact of Digital Mediation and Hybridisation on the Form of Comics by Daniel Merlin Goodbrey
- Electricomics: Digital Pages and Rhythms of Reading by Daniel Merlin Goodbrey