Embeddable Animated GIFs with controls. Just in time for Christmas.
Images from gif.ly are now capable of being embedded as playable GIFs with just a script tag. The embedded GIF has play/pause controls and starts with a static preview of the first frame.
I started collecting animated gifs a few years ago. As a fun side-project, I made gif.ly, a site dedicated to maintaining and presenting my animated gif collection (and it's 100% open source, btw) . It might not be as fun as skateboarding, but it's still not a bad was to pass some time in front of the computer.
The first version if gif.ly I made all the way back in 2010 is also worth checking out if you're building your own arsenal of gif madness.
Giving GIFs Some Playback Control
My favorite feature that made it into the latest version of gif.ly is the play/pause controls on individual GIFs. This feature let me avoid needing to create individual pages for every GIF, but also prevented the inevitable performance hit of having too many large, resource intensive images on a single page.
The GIF controls use a simple
src swapping trick, but there are a couple of things that need to be in place to get it to work smoothly:
- When an image is first uploaded, create a placeholder based off of the first frame. I used image-magick on the server to accomplish this.
- Load the placeholder image first in it's own
<img>tag, since it will always be smaller than the original.
- Use desandro's imagesLoaded jQuery plugin to determine when the cover image is loaded. This excellent plugin normalizes load events for images across all browsers and even works with cached images.
- When the cover is done loading, immediately start downloading the original animated gif in the background. This image doesn't end up going anywhere; the DOM node that's created to load it will never be attached, but modern browsers will treat the image like it's been loaded on the page (by caching it).
- When "play" is clicked, swap the cover image url for the animated url in the image tag's
srcattribute. Since the cover image and the original gif are the same size and the original has been loaded and cached by the browser, the playback should start immediately (or as soon as the animated gif is finished loading).
Once playback was in place, it was only a matter of time before I wanted to make gif-controls a portable interface.
How the Embeds Work
I chose a script based solution over an iframe because iframes don't allow for their content control the size of the frame, which means that if you don't know the size of the GIF you're trying to load beforehand it's likely to get cut off or otherwise not be presented well without additional css.
Here's a breakdown of how the script delivery works:
- Create a script tag that points to a gif.ly embed url. It follows the pattern
http://gif.ly/embed/<gifi-id>, where gif-id is the 8 character short code in a GIF's url.
- First, the script checks if other GIFs embeds are already loaded on the page. If there are, it means this instance of the embed code doesn't have to load any of the additional scripts it needs to run, since they should already be on the page.
- CSS is loaded to style the controls and DOM that contains the GIF.
- A small HTML template is inserted into the DOM immediately after the
- A callback is attached to the load event of the GIF that was just inserted and the play and pause buttons are wired up to do the
srcswap trick explained above.
When all of that comes together, you have a GIF with play and pause controls in place of the script tag.
So that this:
Turns into this:
Autoplay and Other Options
Being rather industrious, I added an option for automatic playback (like the very first embed code on this page), just in case you wanted the embedded GIF to behave more like a "normal" animated GIF. Just pass
autoplay=true as a querystring parameter on the embed code url to enable.
The control panel behavior can also be modified. Passing
controls=true will make the play/pause controls visible at all times, not just on
Here are some cats playing ping-pong to demonstrate the available options:
Use them anywhere
Keeping this all to myself wouldn't have been any fun, so for now at least, there are no restrictions on where you can or can't use gif.ly embeddable GIFs. Use them anywhere that lets put a script tag (which probably means that it's your site and not somebody else's), so be safe an have fun.
If you're looking at a GIF with
gif.ly in the URL, just take it's 8 character ID, put it in a script tag and pause and play til your heart's content.
And most importantly, remember that sharing is caring.
Give this post a bump by sharing it with a friend.