Animation has made a comeback with the use of gif animation in email growing. The crude and unpleasant animation effects of the past that discredited animated gifs have given way to more stylish and valuable animations.
I’ve rounded up eight email examples with animation along with short explanations about the strength of each animation.
You’ll also find at the end of the article 10 tips to creating animations for emails.
ModCloth – spring dresses fashion
The animation is central to the email, with the only products on show being part of the animation.
It attracts the eye and focuses the customer on the most important part of the message, the look of the products. Central to fashion email marketing.
The animation is not frivolous but rather illustrates how products combine helping customers to consider how they can combine products for a personal look.
Louis Vuitton – flash sale
This email is all about conversion. The very flashing nature of the animation fits well with a flash sale. Such a loud and fast moving animation is hard to ignore and is the main message. It provides the sense of urgency associated with a flash sale and is an example of when loud is fine.
eBuyer – free delivery
The animation is positioned near the top of the email and the motion of the van supports that the message about free delivery.
The animation is enough to draw attention without being overpowering and distracting, given its not the only message in the email. Even when the customer isn’t interested in the product featured the animation helps ensure they leave the email aware of the free next day shipping offer.
Nectar – FirstGroup points
The unmistakable destination board animation and ‘All aboard!’ message immediately communicates this email is all about travel.
The further graphical elements to the email make the offer quick and easy to understand. The FirstGroup train image continues the story explaining it’s about travel by train and the ‘1-2-3’ image explains graphically how easy it is for Nectar holders to collect the points.
French Connection – spring video
Animation is used as a teaser to get customers to watch a video. Not all email clients support embedded video and there are definite pros and cons to linking or embed video in emails.
So using a hybrid approach with animation to show a little of what the video will reveal provides a good way to engage customers to see more.
Switch Video – video explainer
Like the previous example this uses an animated gif to sell the click to watch the full video.
It’s the longest animation of all the examples, with 437 frames showing an accelerated version of the full 90 second video on the landing page. This creates a large gif file of 7Mbytes and whilst not a problem for broadband this would be a challenge for some poor mobile data connections. As this email is B2B it’s possible the mobile readership is low making this acceptable.
The first few seconds provide a SlideShare in an email type experience, providing stats and benefit messaging. The later part of the animation becomes overwhelming and it would perhaps have been better if this animation was shorter overall.
Twitter – anniversary
This is a simple email to celebrate how long the customer has been on Twitter. The animation adds the sparkle and rounds it off making you smile.
Ann Summers – Easter bunny
Ann Summers took advantage of Easter to promote their rampant rabbit product with a cheeky animation, sending this email out on Easter Sunday.
The animation is on theme and adds humour to the promotion. There is no need to show actual product as the product name and motion of the rabbit says it all – subscribers to Ann Summers won’t need any more explanation to get the message here.
10 Email Animation Tips
Before you get started with your animation read these tips to using gif animation in emails.
- Ensure the animation supports your message, don’t just add something for effect, it should have meaning too
- Make it simple and whilst it must draw attention it shouldn’t be so strong as to distract
- Keep the length short, up to around 5 seconds
- Set the animation to cycle and repeat
- Avoid animations that create large gif file sizes. All the examples in this article have gif file sizes below 500Kbytes, except the SwitchVideo example that is a huge 7.5Mbytes
- Outlook 2007+ doesn’t support animation. The first frame must make sense in the context of the email, as that’s all Outlook readers will see.
- Use animation to show several products and give multiple messages
- Tell a story with animation or use it to illustrate a feature of a product
- Use animation to add fun and delight to an email
- Split test the use of animation to ensure the extra effort is worthwhile for your audience