On stack overflow, user1857868 asked:
I recently received an emailer from Onnit Labs that included a Countdown Module Timer inside the emailer using a gif image. The emailer can be viewed here: https://www.onnit.com/emails/lastchance-historic/
I looked into it, and it seems you can keep sending new frames to an animated GIF using gifsockets, as a GIF doesn’t specify how many frames it has when loaded in the browser. Here it is on github: http://github.com/videlalvaro/gifsockets
I thought this was pretty interesting and a cool effect indeed. Does anyone have any other insights on how this could be accomplished? It seems as though the one they’re using at Onnit seems to change the countdown according to date appended at the end of URL or image.
I’m trying to accomplish the same thing to send in an email, but I am a little stumped.
My initial thought was that it couldn’t be too complicated because most email clients and older browsers don’t support sockets, so that was discounted almost immediately. I looked at the network tab in chrome, that seemed to confirm it, and when I saw it loop back to the start after 60 seconds I have a pretty good idea how it was being done. The answer it that it loops 60 frames and hopes that the user isn’t enthralled by the clock, or that they read too quickly for the animation to loop. No gifsockets, no magic, just a server generated gif like this one:
Here is all the code that it required, there isn’t too much magic to it (other than the gif layer creator). You can see all the code here: on github. Or here on my test page: which is a bit prettier and also has a link to the font and the background image.
This doesn’t have to be a full countdown clock, with a few modifications it could count the number of days until Christmas or New Years instead.
Here is the code (minus the php 5.2 hack and the gif layering class):
Sidenote: Holy cow the guy who wrote the class to create animated gif sucks at formatting his code and also commenting it and naming the variables.
