Are you on the hunt for some inspiration to build your next email? You couldn’t have found a better place to start.
Join me on a five-minute reading journey as I present you 15 animated GIF examples and break down the steps of the creation process.
You can (and you will) start creating an animated GIF for your email today, as soon as you finish reading this article. Believe me.
A GIF Can Make Your Email Look Less Stiff
Email marketing has been around for over 30 years, and it’s here to stay. However, if we want to stay on top, we need to continually improve our emails and find ways to surprise our contacts.
As marketers, we want our sales emails to stand out in the inbox, engage the customers, and motivate them to take specific actions like filling a form, buying a product, or attending an event.
There are many ways of looking at improving our company emails. One of them is including badass content. Impressive visuals that invite people on a journey to our websites through the simple click of a mouse. Let me tell you a secret: using GIFs in email marketing can help you get attention, engagement, and conversions.
Here’s a brief list of the benefits a small thing as a GIF in email marketing can bring to your company:
- GIFs work on any device.
- They have increased reader engagement.
- GIFs are supported by all major email clients.
- They provide higher email click-through rates.
- GIFs make emails look more professional, which in turn increases your customers’ trust.
15 Examples of Animated GIFs in Email Marketing
If you’re wondering how to make an animated GIF, here’s a list of animated GIF examples I’ve put together for you. You’ll find a detailed explanation of the process for each GIF so that you can better understand how it’s done and help you create one for yourself as soon as you finish reading this post.
Here’s a step by step video on how to create an animated GIF for your email marketing campaigns with Bannersnack:
1. Chewy’s cute little kitty moving its whiskers in delight
Chewy, an online pet food store, sent a sales email to promote their 4 most popular cat food brands. In it, they featured this sweet animated GIF. So touching! As a cat owner, I can testify: watching a cat’s facial expressions is heart-melting. So, good job, Chewy, for finding this great insight!
If you’d like to create a similar GIF to surprise your customers, here’s how:
- Create a beautiful visual with your main object/person/animal. Create additional features (whiskers, hands, pieces of clothes, etc.) that you can use as moving parts to make it look alive.
- Duplicate this slide and just change the position of the whiskers/hands/legs/clothes.
- Save and play. That’s it. That’s really it.
2. Netflix’s email announcement for the upcoming season of House of Cards
Netflix’s emails can be as cool as their movies. Here’s a brilliant GIF announcing the next season of their popular series, House of Cards.
Can you feel the chills running down your spine when Francis Underwood looks you in the eyes? What on Earth is he up to this time?!
How to create a similar GIF:
- Create a YouTube account (in case you don’t already have one) and upload the video you want to use for your email GIF. Make sure the video is no longer than 10-15 seconds.
- Create a Bannersnack account (in case you don’t already have one) and go to “Create New.”
- Picture your GIF already in your email. This will help you to decide which format size you’d like to use. You can go for a header GIF banner (728×90), a rectangle (336×280), or a large rectangle format (1200 x 900).
- Then look at the editor. Hover your mouse over the three little dots at the bottom of the editor’s menu, and you will see that there are more tools for you to use. Click on the first icon, “Add Video,” click on the rectangle, go to Settings and just and paste your video’s URL.
- Pull and stretch your video to fit your banner size or to adjust it.
- Add a shape over the video if you want to hide a part of it and to create a beautiful background for your logo and text.
- Add your logo.
- Add some text. If you want to create the same kind of animations Netflix used for their GIF, add 2 or 3 textboxes and organize them to fade in and fade out at different timings. This is easier than you can imagine! Thanks to Bannersnack’s visual editor, the Timeline, you can easily set your texts chronologically and create animation effects like fade in, fade out, blow, bounce, roll down, roll up, etc.
- Go to the Save button. Name your document and click Save.
- Then you will be transported to your dashboard. Click on the corner on the right-hand side of the document to download the file. Choose the second GIF option, because that’s the animated GIF type of file. Then, choose to download your GIF as a High-Quality file.
- That’s it. Done! Congrats!
3. MailChimp’s automation feature promo email
MailChimp found a suggestive way to present its new automation feature to its customers: a GIF made of moving shapes that build the word “Automation,” letter by letter. If you feel intimidated already, don’t. You, too, can create a cute GIF like this.
- Create your first slide and add your logo and your first shape. Add an animation effect to the shape.
- Duplicate the slide and add one more shape (different than the first one, different color) and its animation.
- Duplicate the second slide and add another shape with a different animation.
- Duplicate the third slide and add a new shape and an animation effect for it. Make sure you combine different shapes.
- Duplicate the slides and add shapes until you finish building a word.
4. Bannersnack’s Timeline feature promo email
When Bannersnack launched its Timeline feature, we thought it would be nice to show people how it works before they tried it out for themselves in the Bannersnack editor. So we made this GIF.
You can make a GIF like this one by recording 10-20 seconds of a scene you choose and then just save it as a GIF.
5. Loft’s flash sale
This original GIF makes our eyes roll in wonder. Ka-Ching. Ka-Ching. Ka-Ching.
Here’s how to create a similar GIF:
- Design the main layout, add 3 rectangular shapes, and put 3 objects inside each rectangle. Animate your objects using the slide up effect.
- Duplicate the slide, delete the 3 objects, and add 3 other objects. Then slide them up.
- Duplicate the slide again, delete the objects you’ve added to the second slide, and add 3 new objects. Animate these as well, sliding them up.
- Save and play.
6. Bigfish.tv’s email invitation to the company’s party
When we think of parties, we think of music, dance, lots of people and fun. And alcohol.. (but that’s just between you and me). This is exactly the insight behind Bigfish.tv’s creative process.
They wanted to introduce people into the atmosphere of the party right from the moment they clicked the email. So they came up with this animated GIF, using flashing splashes of color and small little people dancing their hearts out.
And a lady looking forward to the event, of course. You can tell she cannot wait for the party to happen by the way she blinks. Blink. Cannot wait. Blink.
How to create a similar GIF:
- Create your main layout.
- Duplicate your slide and add a splash of color. Let’s say the color is pink. Then add an animation effect. Go for a fade or a soft blur.
- Duplicate the slide, delete the splash, and add a new one. Choose white as a color. Choose your animation effect.
- Duplicate the slide, delete the splash, and small blue dots. Don’t forget to choose your animation effect.
- Now how do you make the people dance? Go back to each slide and add the people. Start with the first one. Add the people with their hands down.
- Go to slide 2, delete the people, and add new ones with their hands above their shoulders.
- Go to slide 3, delete the people again, and add new figurines with their hands up.
- Save and play. Is it dancing?
7. Mountain Khakis’ Memorial Day sale
I’ve got more animated GIF examples for you, so grab an ice tea and hang in there with me. This clothing brand for mountain lovers found a simple but effective way to communicate their Memorial Day discount. Learn how you can create a similar GIF below:
- Create your first slide, add your text.
- Duplicate the slide, delete the text, and add new words.
- Save and play. That’s it. That’s really it.
8. Halloween Newsletter from Last Craft Designs
Time for a spooky GIF. But first, I must warn you: this one is so easy to create you’ll be outraged.
How to make a GIF following this model:
- Create your visual and add your text. Choose grey as the primary text color.
- Duplicate the slide and change the color of the first word from grey to orange.
- Duplicate the slide, change the color of the first word back to grey, and the color of the second word to red.
- Duplicate the slide, change the color of the second word back to grey. Both words (first and second) should be grey at this time. Change the color of the third word to white.
- Save and play.
9. Sittercity’s astronaut GIF ad
Sittercity, an online babysitter booking agency in the US, sent this cute GIF to their customers to emphasize how hard it is for parents to find a babysitter for their children. No problem, here, Houston! We’ve found our way!
How to create a cute GIF like this:
- Create your visual, add all the elements of the composition.
- Duplicate the slide. Change the position of the main characters in the story. Add some additional elements like stars, clouds, and animate them using the fade-in effect.
- Save and play.
10. Design a Glow’s promo email for a USB design box
Less is more. Here’s an example of a minimum design effort and a great result.
Create one for yourself:
- Take pictures of your objects in various positions. If you want to follow this example, that is to take an object out of a box, take photos of the object at different stages when you take it out of the box, and put it on the table.
- Create a slide for each picture.
- Add text on whichever slide you want.
- Save and play.
Animated GIFs Created in Bannersnack:
And now, I’d like you to have a look at these animated GIF examples created in Bannersnack.
By the way, did I tell you that we now have the GIPHY Widget integration? This means that you can use any element from the GIPHY library in your designs, and edit it just like you would with a video.
11. Clothes promotion
Here’s an adorable four frame GIF banner that instantly grabs your attention and transports you to the pink world of women’s clothes promotions.
What makes this banner so special is the animation created with Bannersnack’s Magic Animator tool. See how the gifts pop up in the third frame?
12. EVO TV
A TV provider in Croatia created this GIF to send their customers an exclusive offer email. I love the way the popcorn pops and dances all around.
This kind of GIF is so easy to create! They used 3 different pictures of the popcorn and animated them to dance, spreading the popcorn all over the layout. Kind of inviting, isn’t it? I suddenly feel the urge to watch a good movie.
13. Wedding invitations
You can even create an animated email to invite your friends and family to your wedding. Everyone will be surprised! Here’s an example: 4 animated frames, flowers blooming all around, and a short text with the event’s details.
14. NGO motivational emails
Or if you’re an NGO concerned about the health of the people living in big cities, you can send out a motivational animated email on Picnic Day. Using Bannersnack’s templates, ready-made elements, and animation effects, you can create a stunning GIF like this one below.
15. Tourism emails
The possibilities to create an animated GIF with Bannersnack are endless. Look at this one, for example. There are only 2 frames, but the animated text and sliding effects make it totally memorable. Wouldn’t you agree?
Create a State-of-the-Art GIF in Minutes with Bannersnack
If you feel inspired by these 15 animated GIF examples and would like to go ahead and make a creative GIF for your next email marketing campaign, you can create a free account with Bannersnack and start designing your custom GIF right now.
You can choose your preferred size format, upload your pictures, or choose one from our vast stock database. Also, you can add your logo and products and use animation effects to make them come alive. Before you start, you may want to learn about the technical details of an animated GIF.
So, read on about the ideal size, how to insert a GIF in an email, and check out the list of email clients that support GIFs.
What’s the Ideal Size of GIFs in Emails?
Animated GIF sizes can get quite large if there are too many frames. The more frames you add, the bigger the file gets. For email, it’s better to refrain yourself and stick with 4 to 5 frames. Don’t worry, you can create awesome GIFs even with 2 frames!
While the ideal size of a GIF for email marketing is 400 kb, you can aim to keep it under 1MB.
What’s bigger than 1MB will either have a hard time uploading, or the email will be blocked by the mail client.
Keep in mind that people check their mail on their phones too, so keep it as small as possible!
How to Insert a GIF into an Email
After you have optimized your GIF, you’ll want to include it in your email. This is easy. You can add your GIF in the email just the way you would upload an image, because after all, GIF is only another image file.
Email Client Support
Animated GIFs work well in all major webmail, desktop, and mobile clients with a few exceptions. The exceptions are Microsoft Outlook 2007, 2010, and 2013.
Here’s the entire list of email clients:
|Desktop Clients||Webmail Clients||Mobile Clients|
|Lotus Notes (6, 7, 8.5)||Gmail||iOS Mail|
|Outlook 2000-2003||G Suite||Android (Default)|
|Outlook 2007-2013||Yahoo! Mail||Android (Gmail)|
|Outlook for Mac||AOL||Android (Gmail IMAP)|
|Windows 10 Mail||Comcast|
Source of email clients list here.
I hope you’ve found enough inspiration here to get started with animated GIFs.
For more tips and information on how to create unique visuals for your promotional campaigns, keep an eye on our blog. We’ve got freshly served blog posts every week.
Get industry news, studies, how-to articles, exclusive Bannersnack offers and product updates every other week.