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, open devtools and play the video (if your video is not yet ready then you will only see tiles of images).


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.


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)


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();'', function() {

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.



Private Function in Javascript & Coffeescript

I have not worked in Java but I used to do in when I was doing my graduation. One thing I always liked about Java is encapsulation. It provides really good encapsulation in terms of readability. I don’t know if following code will work or not but this is prototype of encapsulation in Java


I miss that feature in JavaScript. You can create private function in JavaScript but it is not as intuitive or obvious to read. Now before moving ahead you should know how Object Oriented Programming is done in JavaScript or at least how prototype is used. This is how I used to do encapsulation


But it does not give you the notion of Encapsulation which you get while coding in Java. So Coffeescript comes to rescue. Take a look at gist below

If you see the layout of code it does look like pure encapsulation supported by Object Oriented Languages like Java or C++. Look at the definition of doPrivateThings it has = in it instead of ‘ : ‘ which makes it private function. However context of that function will be window. So by doing you are also making sure that context to that function will be of instance of person class, so that in this case other members like name will be accessible todoPrivateThings Isn’t this cool? Now hang on a moment, JavaScript code which Coffeescript Compiler generates is even cooler. It is one of the best JavaScript Hacks I have come across

First person is defined as a variable which assures that person will be accessible anywhere in that scope. Now on line 2 it has been assigned a self executing anonymous function (something which you don’t see in traditional languages). Then inside local instance of person is created and further snippet is exactly same as I have shown in snapshot earlier. In this scope person acts as a class (as its prototype is defined) and same person object is assigned to person from outer scope with help of return which makes outer person closureSince person is now a closure you can still access doPrivateThings by maintaining the context.

It is not great in terms of readability but it is intricate and brain teasing. I don’t know how many of you actually understood the concept here as it is really hard to understand in one read.

I found a good thread on stack overflow about to it in which another method is described which can do encapsulation.