GC Email Animation Catalog

Read this before anything moves

The email must sell fully as a static image. Motion is show — a conversion enhancer for the clients that render it. It may not load for everybody: Gmail strips CSS animation, classic Outlook freezes GIFs at their first frame, and some readers block images entirely. Every technique in this catalog is a nice-to-have, never a necessity. The test for any design: remove all motion — if the message, the offer, or the hierarchy breaks, the design is wrong. Fix the static email first; add motion last.

Mechanism 1

CSS keyframe animation

Lives in the email's HTML. Plays in Apple Mail and iOS Mail — typically 50%+ of a DTC list's opens. Gmail, Outlook and Yahoo strip it and show the finished static state. Zero file-size cost, easy to ship. Email has no JavaScript — nothing can trigger on scroll or click; CSS animations simply play when the email opens.

Mechanism 2

Animated GIF

The universal workhorse — plays in essentially every client. Classic Outlook (2007–2019) shows frame 1 only, so frame 1 must carry the complete message. We already ship these: the PIL-generated marquee bands, hosted on our own Shopify CDN. Budget: aim under 300 KB, hard ceiling 1 MB.

Mechanism 3

Live image service

A server (Sendtric, NiftyImages, etc.) generates a GIF at the moment of open — this is how countdown timers show real remaining time. Behaves like a GIF for support. Note: Klaviyo's native countdown block is drag-and-drop only; our CODE templates need the service route.

House rules for GC motion

Static first. Design frame 1 / the frozen state as the complete sell. Motion decorates it.
Maximum two moving elements per email — usually one hero motion + one CTA accent. More reads as discount-store.
Slow and subtle wins. Our marquee standard is ~25px/s. Luxury never rushes.
One-shot over infinite. Attention effects fire once or twice, then go still. Endless looping fatigues.
Never animate the price. Numbers people are deciding on must hold still.
Klaviyo gotchas: no background-image on table cells (gets dropped) — animation ships as a flat <img> (GIF) or as CSS on real elements. All images on the Shopify CDN, never base64.

What we never do

These aren't matters of taste — they either don't exist in email, break in Klaviyo, or damage the brand.

✕Scroll-triggered or click-triggered anything. Email has no JavaScript. Reveals "on scroll" do not exist; animations play on open or loop — that's the entire vocabulary.
✕Autoplay video. Not supported meaningfully anywhere. Ship a GIF that looks like video, linking to the site.
✕CSS background-image tricks. Klaviyo drops background-image on table cells — this has bitten us before. Anything visual ships as a real <img>.
✕Fast infinite loops and flashing. Reads as spam, fatigues the eye, and rapid flashing is a seizure risk. Nothing in a GC email blinks.
✕GIFs over 1 MB. Slow to load on mobile data and some clients clip heavy emails. Target under 300 KB per GIF.
✕Animating the price. The number a customer is deciding on never moves, ticks, or pulses.
✕More than two motion elements in one email. One hero motion + one CTA accent is the ceiling. Three moving things is a flea market.
✕Motion that carries the message. If the offer is only legible while something plays, Gmail and Outlook readers never receive it. (This is the disclaimer, one last time.)

How to choose — the decision guide

Per-email budget

One hero motion — cinemagraph, Ken Burns, crossfade, or marquee band.
One CTA accent — sheen, pulse, or arrow nudge.
Nothing else moves. Urgency timers count as the hero slot.

Match mechanism to audience

Check the open-by-client split in Klaviyo before leaning on CSS techniques — they only play for the Apple share of the list.
GIF techniques reach everyone; spend production effort there for campaign heroes.
CSS techniques are free to add on top — they're pure bonus for Apple readers.

Production checklist

Design the static email. Approve it as if no motion exists.
Pick motion from this catalog (respect the budget above).
GIFs: designer or PIL pipeline → seamless loop → frame 1 = complete sell → under 300 KB.
Upload to the Shopify CDN (animation survives; base64 does not fit Klaviyo).
Test: Klaviyo preview + real sends to Gmail, Apple Mail, and Outlook before the campaign goes out.

When in doubt

Choose the static design. A still email that sells beats a moving one that distracts.