How Polaroid Makes an Interactive Embed
Polaroid Swing is an app that lets you record and post short bursts of frames. When viewers touch the image, they can pan through the frames. It’s like video, except instead of pushing play, you pan through the filmstrip.
Here’s what it looks like:
What I’m most intrigued by is how they thought of the experience outside of the app, specifically for the web. It’s not so common to see interactive embeds like this that move beyond clicks.
You know me, I love interactivity in the browser, so of course I’d dig into the code a bit. Here are a few notable qualities in how they build the embed.
1. The embed checks for scroll actions first, then handles interactivity.
An embed that responds to touch and drag events can interfere with scrolling. Think of it this way — if I make an embed I can draw inside, and embed it in an article, what happens when I make a vertical line on mobile? Will it draw the line, or scroll through the article? This embed checks for a scroll action first. If there is none, it will start doing the interactive panning. UI wise this makes perfect sense. I move up and down to scroll, and side to side to move through frames.
2. The animation is created with a sprite sheet, rather than a stack of images or a movie.
Movies can get clunky to pan through. In this case a sprite sheet, called a ‘mosaic’ here, is created consisting of a grid of frames. Panning along the x direction determines what frame to show. You can see the sprite sheet URLs in the polaroid object tag.
Sprite sheets can be heavy. There is a preview image that loads first, and two sizes of the sprite sheet to choose from. A nice CSS blur transition helps make the load look great.
3. The sprite sheet is animated using JavaScript and the canvas
In the animated covers I worked on with Video, I used sprite sheets with CSS animations. After searching through a few different methods it felt elegant in it’s simplicity.
Here, the frame in the sprite sheet is based on the touch event along the x-axis, and JavaScript is used to determine the frame based on the interaction. The appropriate frame is rendered in a canvas element.
4. For some positions, several frames are rendered at once.
Because a canvas element is used, several images can be drawn on top of one another. Some x-positions correspond to points in-between where two frames would be. In this case a combination of the two frames is rendered by adjusting the alpha values (i.e. transparency).
I’m thrilled to see a new kind of interactive embed created, one that moves beyond pushing play. From interactive illustrations, visualizations, and of course maps, It will be interesting to see how people use this kind of interactivity in the context of articles and storytelling.
If you found this post interesting, hit the ❤ to help spread it. Thanks!
