Yesterday, I got an email from Memrise, a popular language learning tool.
The email had an animated countdown clock in it, which unfortunately I didn't think to capture with a screen recorder. Nevertheless, here is what it looks like now:
Having worked on HTML emails in the past, I was impressed.
I wanted to know how they did this countdown magic.
First, I notice that the countdown clock was an image. Duh. It had to be!
So then I followed the source of the image and saw it was a url without a file extension. I.e., there was no
.jpeg at the end of the url. It was just
I opened this url and inspected the headers to see what was going on:
HTTP/1.1 200 OK Pragma: no-cache Content-Type: image/gif Transfer-Encoding: Identity Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0, max-age=0 ETag: 14126387014612041038 Date: Tue, 10 Mar 2020 08:51:54 GMT Content-Encoding: gzip Expires: -1 Vary: Accept-Encoding
Right! It's a gif.
But... how'd they get the gif to work like a countdown?
This part is just guesswork, but I'd imagine that this endpoint programmatically sends back a non-looping gif depending on the server time.
That is, the server calculates how many seconds are left until Memrise's sale finishes, then it sends back a gif that animates a new frame every second, starting from the time until sale expires and finishing at
Now, when I download and inspect the gif, it is only one frame,
I wish I had time to try to recreate this... but unfortunately, I just got to work!
If you have an alternative theory about how this magical countdown clock works, I'd love to hear it in the comments 😀