The stars of our favorite GIFs often lead dangerous, if only seconds-long lives.
They take terrible tumbles. They get kicked, thrown and dropped. But for every Wile E. Coyote, there must be a Phineas Flynn: a simple, inventive GIF.
For designers who seek a dash of spice in their interactive infographics, a small GIF can add zest to an otherwise stagnant page. Below, we present a rundown of five pristine GIF examples, and why they work.
This is the first in a series of three posts on dynamic design, entries that will offer a few examples of well-done web-based animation and multimedia, and the pros and cons for each. For more on the ultimate motion-supplemented medium, interactive infographics, read Lemonly’s in-depth e-book Why Interactive Infographics?
Before we hit the list, let’s consider the following ups and downs of GIFs:
The good news: GIFs allow for precise movement, teased out by intricate effects that aren’t as easily achievable with CSS animations. The bad: GIFs can run larger on filesize, impacting the load times for your sites.
If all you need is linear movement, rotation or fades, stay tuned for our roundup of CSS animations. If you’re aiming for something more detailed, go with a GIF.
Now step right up for our roundup of examples:
1. Dribbble is 5!, by Fede Cook
Everyone loves a quality Rube Goldberg machine. Fede Cook’s celebratory loop is a GIF that would make the musician hearts of OK Go flutter (see the band’s circuitous music videos for reference).
While each connected process intricately defies the web’s simpler animation techniques, it’s the camera’s perspective that settles the debate: This is a scene perfect for a GIF.
Speeding up to follow the plunger, rising slowly to catch the balloon, it’s the camera that convinces viewers to forget that fourth wall. So it’s OK if you’ve started singing “Happy Birthday” quietly to yourself.
2. Rockstar, by R A D I O
Never has a studded leather vest looked so smooth. Whipped hair, a ruby-red Flying V guitar and a bouncing amp take the stage in this GIF by R A D I O, a creative studio based in Cape Town, South Africa.
While the action is more subtle here, simplified further by a regular rhythm, count the number of elements that move. Examine the ways in which they bloat and pucker, expand and compress, and move according to model.
While CSS animations are improving toward this kind of motion, a GIF is still a more practical and time-efficient solution.
3. Rainy Day, by Justin Mezzell
Not all beautiful GIFs need to last longer than a second. This stormy GIF by Justin Mezzell succinctly tells its story.
If you hear thunder in the distance, you’re not alone. We’re half-expecting the cat to stick its paw out the window, too.
A sunnier complement to this perspective might be better executed with CSS animations. But add in some precipitation and lightning strikes, and the snapshot complexity demands a more exact tool.
4. Vacation, by Linn Fritz
Yes, there’s a theme forming here. GIFs are often more powerful if the first frame matches the last. It offers a kind of perpetual motion that doesn’t require us to break the laws of physics.
In this constantly evolving example by Linn Fritz, the sun becomes a support for the Earth. The world circumnavigates a camera’s lens. And a photo encapsulates the globe.
The playful bounce at the end of each state change enhances the detail and, simply, the fun. We can’t wait to hit the road with our fanny packs and luggage in tow.
5. Tree Of Seasons, by Dennis Hoogstad
In the time you’ve read this article, Dennis Hoogstad’s Tree of Seasons GIF has lived through four U.S. presidents, a few dozen iPhones and countless snowmen, built and melted through many blisteringly fast winters.
From the transfer of movement powered by bluebirds and bees to the swaying, changing grasses of spring, summer and fall, this is a beautiful GIF that gives us hope for the future.
So here’s to you, Mr. Oak Tree. May you stand tall through the next millenium.
