Programming

Facebook’s ‘A Look Back’ video is composed in CSS3

Yesterday evening when I got notification from Facebook that “A Look Back” video was ready. I decided to give it a shot. Without thinking much about it, I simply hit the play button and as video progressed I realized some of the images were half loaded. That was weird. If the video is being played then how ‘image loading’ is happening. Like any curious web developer, I took out ‘our’ Swiss Knife a.k.a. Chrome Devtools. And voilà, it was nothing but CSS3. I was completely jaw-dropped, whole video was composed in PURE CSS3 and JavaScript. Who would have thought that?

Go check yourself. Visit https://www.facebook.com/lookback, open devtools and play the video (if your video is not yet ready then you will only see tiles of images).

devtools

As you can see the DOM tree of photo tiles. Links, position and dimensions of the image are visible on the right.

scale and translate

Throughout the video scale and translate functions are primarily used to do create moving and scaling effects.

WYSIWIG

No surprise there as your statuses are treated as just another SPAN element.

Object object

Apparently code is not bug free (if you know what I mean)

Audio

Yes, song is played via audio tag. You play that song in a new tab. I have copied the link, just click here.

After some observations, I realized there is no use of transition. All the ‘easing’ related calculations are done via JavaScript and applied dynamically. That is weird for sure. I am heavily using transitions in my startup Expojure for various animations and results couldn’t be better. Even John Resig recommended to have CSS Transitions over JavaScript based animations.

But the major question remains, how whole animation sequence is converted in a video? Because when you ‘Share Your Movie’, it is nothing but a traditional video. From my understanding, it must be done using headless browser on top of which screen capturing is happening. Let us assume PhantomJS is used as a headless browser as it is the most popular one out there. PhantomJS supports screen capture. So snippet like –

var page = require('webpage').create();
page.open('http://facebook.com/lookback', function() {
  page.render(frame.png');
  phantom.exit();
});

would create a single snapshot of the page. Considering the video is shot on 60 FPS with duration of 60 seconds, about 3600 images must have been taken using screen capture. These stack of images can be converted in a video using libraries like OpenCV. Whole concept is just my assumption. Maybe the real process is different or simpler than this. I would love to know your comments on this.

It is undoubtedly some of the finest software engineering. It also makes sense, as unlike Google+, Facebook is giving you choice of photos and status you want to include in the video. So it is just storing a list of posts on the database and using that list, whole DOM animation is rendered on the servers to create a video. However I am not sure if CSS was the obvious choice but from my experience with 3DTin, obvious choice would have been Canvas API as we partly worked on WebGL based animation.

What really impressed me was, implementation of KISS Principle. Instead of creating a video editor (in Canvas API), Facebook kept everything simple and straightforward from both Developer’s and Viewer’s perspective. It lets you select the posts you want to see and the script takes care of rest of the things. From a web developer’s perspective, it is indeed a top-notch work. After all why would you build a video editor just to let users to customize their montage (which they are going forget after few months).

Kudos to Facebook’s Engineering Team. Great Work.

Kudos

Advertisements
Standard

4 thoughts on “Facebook’s ‘A Look Back’ video is composed in CSS3

    • Interesting. I guess it varies from browser to browser. Since I opened the video in Chrome, whole thing was in CSS. In fact you can see prefix used in the each style is -webkit. So it may not applicable for non-webkit browsers.

    • I understood what you meant by “You have the new design or not”. I read a blogpost about downloading the video and it demonstrates the use of flash. So you are right, I have the new design. For rest it might be good ol’Flash.

  1. Pingback: How to Download Facebook Look Back Movie Video

Express your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s