Design Trends

Cinemagraphs: the latest evolution of the animated GIF

View all posts

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. 

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

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.

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. 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.”

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. 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.

More posts like this
Author

Jason Winter, Owner of WinternetWeb Technologies, LLC
Jason has a unique background of technical skills and programming merged with an English degree from Virginia Tech, a Master of Science degree from N.C. State in Technical Communication, and several years as an educator. His blog posts typically surround technology, history, and societal trends.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.