Interactive Email Tutorials

Full Page Intro Animations in Email

This is a simple technique to show a brief animation of an object or text against a blank page and having the rest of the email "fade in" after the animation ends. This is a follow on of a previous example with

Read More

Fade in Text Effects for Email

Adding subtle text animations in your email hero area can add some sophistication into your design. Although not every email client supports CSS animations, here is a simple technique you can use to display a slow drop down and fade in effect

Read More

How to Fix Jittery CSS Animations in iOS Mail

Here is a technique that solves a common kind of animation jitteriness in iOS Mail. Under certain conditions, quick, single iteration (non-repeating) CSS animations in iOS tend to skip - causing movements to look glitchy and jarring.

A solution is to increase the

Read More

Using -webkit no Longer Needed for CSS Animations in Email

Its 2018 and email clients that support CSS animations no longer require the -webkit vendor prefix when using the animation CSS property or @keyframes rule.

Read More

Magic 8 Ball: Achieving Pseudo-Random Outcomes In Interactive Email

I built an email incorporating an interactive Magic 8 Ball for Email on Acid. This technique uses a technique animating a series of labels over a button to achieve a "pseudo" random outcome when the user presses the button.

Read More

Faux-Fixed Interactive Email Scrolling Technique

I wrote on the Email on Acid blog a technique to mimic fixed positioning yet works on a surprising number of email clients, namely: iOS (iPhone, iPad), Apple Mail, Outlook for Mac, Gmail Webmail and Mobile Apps (yes!) and Yahoo!

Read More

Faux-Video: Video in Email Using Sprites

Kristian Robinson implemented a technique to display a set of videos using JPEG sprites for UK's Channel 4. This technique involves converting a video into a grid of scenes in JPEG and using CSS animation display the "faux-video"...

Read More

How to Implement Sliding Carousel Transitions

This article goes into the details on adding sliding transitions between images in a image carousel for email.

Read More

How to Restart CSS Animations in Email Using The :active Pseudo-Class

One of the questions often asked about CSS animations is "Why use CSS animations when an animated gif works in many more clients?"

Until now, the answer seems to be that CSS animations are more fluid, has smaller filesize and a much higher

Read More

Interactive Puzzle in an Email

I built an interactive puzzle for an Email on Acid promo. It features rotating four letter combinations that when unlocked displayed a link for a coupon. There were quite a lot of techniques put into the example and it was really fun

Read More