Design

Cinemagraphs: the latest evolution of the animated GIF

4 min read
Jason Winter
  •  May 16, 2016
Link copied to clipboard

There’s something hauntingly beautiful about cinemagraphs. It’s no wonder they continue to capture the attention of the digital world. 

Unlike still photography or video, cinemagraphs are a marriage of these traditional mediums’ best qualities. Good photography and video can immediately stimulate feelings in ways beyond just written text. We are a visually stimulated population. Our attention spans require marketing strategies that get the message and content across quickly.

As users passively graze through thousands of posts and sites, a cinemagraph stands out as a scroll-stopper.Twitter Logo 

“Cinemagraphs are in many ways the latest evolution of the animated GIF.”

Twitter Logo

A cinemagraph is an effective way to tell a story through an image that incorporates a bit of looped motion. As a medium, it’s gaining momentum and has frequently been credited as being a dominating design trend for 2016. Many global businesses use cinemagraphs in their marketing campaigns for just this reason. In fact, among a series of still photos, Jeep used cinemagraphs in its Super Bowl 50 “Portraits” commercial, adding motion, texture, and character.

Cinemagraphs vs. animated GIFs 

Cinemagraphs are often posted and shared online as animated GIFs. Not to be confused, cinemagraphs can be in a GIF format, but they’re designed much differently. Traditional animated GIFs display a sequence of frames in a loop, much like a short video.

As an art form, cinemagraphs are different. The designer paints a masking technique to select the portions of the canvas he or she wishes to animate. What remains is a still photo with subtle movement.

The design process

The design process can be described using the image I created below. For this project, I captured 2.5 minutes of video of my friend enjoying a tobacco pipe. Of those 150 seconds of green screen backed video, I trimmed it down to just 5 seconds. I then added a background and painted a mask over the video so that the only motion was rising smoke. The result left the countenance of my volunteer frozen and debonair.

Cinemagraph by Jason Winter. View it in full quality.

Cinemagraphs: GIF 2.0?

Cinemagraphs are in many ways the latest evolution of the animated GIF.Twitter Logo Their popularity continues to grow, fed by a viral activity of likes and shares on social media.

Marketing and content design is like a digital fashion industry. There are trends that fall out of favor and emerge years later after a new generation has foraged through the dusty attic. As a design medium, the animated GIF has an ironic past, leaving me still surprised to see its return.

The near 30-year-old animated GIF predates the internet as a method to send animation over slow modem connections. How ubiquitous was the envelope flying into the opening mailbox as an email address attention-getter? And don’t forget the “under construction” animations in our early years of web design. 

Looking back, we chuckle. We’re glad the Internet Wayback Machine hasn’t exposed the Angelfire or Geocities webpages of our past.

“Cinemagraphs are a less-intrusive medium than video.”

Twitter Logo

At times, less becomes more 

Unlike 30 years ago, the internet today can stream video, yet the animated GIF has withstood the test of time. A seamless, looping cinemagraph can orchestrate a mesmerizing and timeless visual message. Compared to video, a cinemagraph can promote a company’s brand or evoke emotion in a few seconds. Cinemagraphs are a less-intrusive medium than video.Twitter Logo Viewers can invest as much time as they want in the experience.

How to get started

If you’re interested in experimenting with cinemagraphs, I highly suggest using Cinemagraph Pro by Flixel. It’s feature-rich and easy to use, allowing you to focus on your creativity without being burdened by laborious editing. 

Among other tips: When shooting your video footage, use a tripod, visualize the end result, and shoot longer than you expect you need. Please reach out on Twitter @WebNBrewMaster. I’d love to see your work.

Collaborate in real time on a digital whiteboard