Add Instant Interest to Your Emails With CSS Scrolling & Panning Effects >

screen-shot-2017-01-24-at-9-27-31-amEmail nerds have been using animation to take their visuals to the next level of greatness for some time now. Typically, integrating any kind of animation involves GIFs. A lot of them. But with a little CSS finagling, a single image can infuse your email with panning, scrolling, looping effects–without the file size limitations and other strife of GIF-making.

If you’re looking to quickly add animation and visual interest to your email, CSS @keyframes could be for you! CSS @keyframes can animate a beautiful background image with scrolling and/or panning effects. And the code that sets in all in (literal) motion is simpler than it sounds. It looks a little something like this:

                        @keyframes backgroundAnimation {

 

                                                0% { background-position: 1000px 0; }

                                                100% { background-position: 0px 0; }

 

                        }

A little coding nerdery: The “backgroundAnimation” defines the @keyframe, and is later added to the CSS “animation” property to add the effect. 0% sets the starting point for the animation, and 100% sets the ending point. The background image should be extra wide (our example below is 1849px) to create the scrolling effect.

Celebrating the Holidays, Email-Style

Each year, we try to showcase some of our favorite email innovations in a fun and festive way with our annual holiday card. This year, we knew we had to roll with the scroll. Take a look at our “sea-tastic” holiday card to see this CSS trick in action.

 

giphy

As the background image moves, a hand-created vector illustration of our seafaring CEO Simms Jenkins gazes into the starry sky. By nesting a table inside the table containing the background image, the image of Simms remains static while twinkly ships, toasting BrightWavers and a Santa-hatted dolphin float by. Pretty neat, huh?

The Response

By saving you from some massive GIF files, this technique lets you more easily create disruptive inbox experiences. In a space where most scrolling occurs in a strictly up-and-down fashion, horizontal movement provides an unexpected and memorable respite from those ups and downs. And being able to achieve the effect with a quick snippet of code certainly sounds like a win all-around go to this site. Basically, it’s exactly the kind of “surprise and delight” element consumers can get excited about when used smartly. And the clients and partners who received our holiday card certainly responded super positively with more than a few, “How’d you do that??”s.

The Fallback Plan

Sadly, as with all things email, this will not work in all email clients. As a fallback, displaying the most important content in the initial “frame” of the background image will do the trick. Email clients that do not support CSS @keyframes will just not animate. Simple as that.

Happy New Year and happy coding, email nerds! As we sail further into 2017, we’re jonesin’ to see new email-animating ideas brought to life with GIFs, CSS @keyframes and more.

Leave a Reply
(will not be published)