Utilizing animation within email using GIFs and CSS

Utilizing Animation Within Email Using GIFs and CSS

Today’s inbox is a competitive place. Email marketers understand the need to entice their audience not only with personalized content and tempting offers, but also trendy visual appeal. The interactive, video-heavy web experience of today has forced marketers to push the boundaries of email-friendly HTML beyond a clean, branded design. Easily implemented animations within an email, whether by animated GIF or simple CSS, provide a means to stand out in a crowded inbox and a way to look and feel consistent with a brand’s website.

Today we’re going to explore a few different ways to incorporate animation within your marketing emails.

Using Animated GIFs

If you’ve been paying attention to marketing emails over the last five years, you may have noticed the ever growing use of animated GIFs. These delightful moving images can be used to promote multiple products, educate a user on navigating a new feature, or just provide some eye-candy that could be the difference between a click through and a delete. The best part? When comparing GIFs to other advanced interactive elements, GIFs render wonderfully across most email clients. Troublesome clients include Outlook 2007+ and Windows Phone 7, which only display the first frame (not bad!)—so be sure to include all the vital information in the first frame.

GIF Example 1

GIF Example - Countdown Timer

A countdown timer is a great way to add a sense of urgency to an email. This countdown timer, from our friends at LiveClicker, is one of our favorite uses of animation. Strategically, countdown timers help create a sense of urgency for subscribers, eliciting that ever present FOMO. The fear of missing out on a limited time offer can often encourage a click to explore the offer further, increasing your chances of seeing conversions. Of course, you can use a countdown timer for many different purposes—countdown to the end of a sale, countdown to an event, countdown to a holiday, etc.

Looking for a way to incorporate countdown timers into your strategy? LiveClicker provides a straightforward tool to create, schedule, and design a countdown timer. It even allows for flexibility for subscribers in different time zones and gives marketers complete control over a replacement image when the timer hits zero.

Animated GIFs as Background Images

Another darling of email marketing—background images. Why not combine two trends in one? By using a GIF as a background image, we can ensure that our overlaid HTML copy and the call to action are rendering even when images are off.

GIF Example 2

Cinemagraph example from Cinemagraph.com

This example showcases Cinemagraphs—still photos where a minor, repeated movement occurs, that have taken web design by storm as a way to add visual interest. Any GIF can be used as a background image, but cinemagraphs work particularly well because the mild nature of the animation limits distraction—enhancing the content of the email, not detracting from it.

Like all GIFs, GIFs as background images will animate in all email clients except for Outlook 2007+ and Windows Phone 7, which will only display the first frame of the animation.

CSS Animation

Animating with CSS is a great way to include moving email elements without taking the time to create a custom GIF. CSS animation also loads muck quicker than GIFs, which tend to be quite large. The downside? CSS animations only render in a limited number of email clients, including iOS, Android Native Mail, Outlook for Mac, and Apple Mail.

Alex Ilhan of Email on Acid opened our eyes to some of the possibilities with CSS animation in this blog post. Check it out for real world examples and potential marketing uses.

Fade In/Out Example

CSS Animation - Fade In/Out Example

Translate Up/Down Example

CSS Animation - Up and Down Example

Rotate Example

CSS Animation - Rotate Example

Bottom Line: Get Creative

We encourage you to get creative when it comes to including animation in your emails, but remember animation is meant to enhance your email content, not take away from it. Use animation sparingly and keep in mind the subscribers whose email clients won’t render the effect.

As always, if you need any assistance in tweaking your code, our Implementation team is here to help!

Note: this post was first published on September 12, 2017 by Adam Sukenik, it was re-written and re-published by Polly Flinch on March 6, 2019

More to explore...

Introducing Coupon Manager

The WhatCounts team has been hard at work on a new feature, Coupon Manager, which streamlines using coupons in campaigns. Instead of using a generic

Read More »

Ready to See WhatCounts in Action?

This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy. We won't track your information when you visit our site. But in order to comply with your preferences, we'll have to use just one tiny cookie so that you're not asked to make this choice again.