Let it snow (in your emails): Add a snowfall effect in Design Studio 

The holidays and cooler weather (for folks in the Northern Hemisphere) are upon us. Customers receive a lot of emails this time of year, whether it’s essential communication or shopping updates. Standing out from every other holiday-themed message might already be on your to-do list.

Adding a snowy background can bring a bit of fun and personality to your brand. But for many of us, there are some very real drawbacks: coding and testing a CSS animation takes time, using a GIF can slow down load times or tank image quality, and a moving background can be distracting (or overwhelming) for some subscribers.

So, as a little festive treat, we’ve put together a custom component that solves each of those issues:

• Time: It’s already built, all you need to do is add it to your workspace and drag the component into an email.
• Loading: It uses an optimized CSS animation and adds just under 5kb—lightweight, efficient, and it even works when images are blocked.
• Accessibility: It’s built with an accessibility first approach, so if a user has blocked animation, then it won’t show.

One final consideration is email client support. This isn’t going to work everywhere, but it’s a nice progressive enhancement where it does work, and with this component, it’s minimal effort.

So, with all that solved, you can start adding a subtle snowfall effect to your messages in just a few clicks. In the steps below, I’ll guide you through adding the component, explaining how it works, and how to customize it to match your designs.

Ready to get started? Here are the steps you need to take.

First, in Design Studio, create a new component. We’ve named our component animated-background. If you choose a different name, then you’ll need to edit the name in the preset content to match.

Second, paste this code into the component, replacing the default content.

If you decide to choose a different name, then you’ll need to update the code on line 11 to match your chosen component name.

content: `<animated-background/>`

Now your component is ready to use.

Next, open an existing email or start a new one, and you’ll see it listed in the Insert menu under Custom Components.

Drag it anywhere into your email, and you should see it start to snow.

Note: This works by replacing the background set in the message settings (x-base), if you are not using the standard component x-base then add a <div class="x-wrapper"> around your content. Note: Sections sit on top of the background, so if you set a background on a section, it will cover this animation. However, I would advise using a content fill on the section so the animation doesn’t run behind any text.

Since this component only adds styles, there is nothing in the visual editor to click on to select it. Instead of selecting it, you can use the layers menu.

From there, you can choose to delete it, to remove the animation. Or select it to see the properties menu and add a background color.

When looking at the number of email clients that support animation, the numbers are pretty low. However, in terms of market share, support is quite good. Anyone using the default built-in email client on an iPhone or Samsung phone will see the animation. In addition to people using the Apple Mail desktop app and a handful of other apps.

The number of users who will actually see it will depend significantly on your audience. Additionally, anyone using a view in browser link will also see the animation.

For users who are viewing in unsupported email clients or have turned off animations in their system settings. They will see the background that was set in the message properties.

The code in the component will work as it is, but if you want to make some changes, either to help learn how it works or maybe to make it more in line with your designs, I’ll share a few notes to guide you through.

<style #isolated>

Using #isolated on the style means it will stay in it’s own <style> block. This help with email clients that may remove an entire style block if their sanitizer finds something unsupported. Also Gmail will remove all styles after 16kb, isolated styles are always moved towards the end of the code.

@supports (animation: snow){} @media (prefers-reduced-motion: no-preference){}

The styles are all wrapped in @supports (animation: snow), so they will only render where animation is supported and @media (prefers-reduced-motion: no-preference), which means if someone has set their system to prefer reduced motion, then the code will not render and the animation won’t show. This is a simple accessibility enhancement that allows users to opt out of the animation.

The styles are all set up in the .x-wrapper class; this class is added to all emails that use the default x-base standard component. It was set up in this way so that most users could start using it right away. However, if you are using a custom base in your designs, you could edit the class name to match what you are using.

The animation works by creating two pseudo-elements using::before and ::after. Using pseudo-elements here means we don’t have to add anything extra to the HTML. So we can drop this component anywhere in the code.

Each pseudo-element is set with a 600px square repeating background image. We’ve done this here using radial-gradient for the snow but this could also be done with a background image.

The pseudo-elements are then positioned to cover the entire size of the x-wrapper. Additionally, we use top: -600px, so they are actually 600px taller than the x-wrapper.

The animation is set as to{translate:0 600px;} which will move it down 600px. So at the end of this animation, the extra 600px we’ve added will move from overflowing at the top to overflowing at the bottom. The x-wrapper is set to overflow:hidden so we don’t see that happening.

Because the pseudo-elements are set to position:absolute which removes them from the normal document flow, effectively giving a higher z-index. This means they will show over the rest of the email content, making it harder to read and impossible to click on. For that reason we need to move them back by setting z-index:-1. This puts them behind the x-wrapper so we also need to make sure that it has background:none so we can still see our animation.

We are using two pseudo-elements here to create the effect of foreground and background snow falling at different rates, adding a bit more depth and realism to the effect.

To make the animations look a little different from each other, and less obvious they are using the same background. We set margin-left: -300px on one so that the backgrounds won’t fully overlap, then set opacity: .65 and filter: blur(2px) to make the slower animation feel like it’s in the distance.

The timings of the animations are set to 7s and 11s, so they move at different speeds. Using prime numbers here increases the time between these offset animations. In this example, it will take 77 seconds for the pattern to repeat. If we wanted, we could easily extend this, changing 7s to 7.1s, which would take about 13 minutes to repeat.

Because this component consists only of styles and no HTML, it won’t appear in the layers menu. However, we can work around that by including a <div> that only shows when in the visual editor.

<template><div #if="process.env.CARTA_ENV === 'development'"></div></template>

If this snow effect sparks ideas for other custom touches, Design Studio is a great place to explore them.

This animated background is a great example of the benefits of using custom components in Design Studio. It may take some time and effort to build and test something like this (although we've done it for you this time). Once it's built, it can be quickly and easily dropped into a number of emails and reused year after year.

Using components means it’s very quick and easy to remove at the end of the season (or if your emails need to be signed off by Ebenezer Scrooge).

Give it a try, see what you can create, and let your emails shine a little brighter this season.