Taking About:Home Snippets to the Next Level.

If you are a Firefox user and you start the browser this morning or you type “about:home” in the URL bar we have a surprise for you. Instead of the Firefox logo you’ll see an animation celebrating the global spirit of community. This is just one of many planned enhancements to mozilla.org pages and mozilla communication channels.

To give you a peek under the hood and insight as to how this was made, we asked Bruce MacFarlane from Particle a few questions about the animation. Particle has been working with the top silicon valley companies exploring ways to use HTML5 and CSS since their beginning. They have a unique blend of talent that hovers between creative development and engineering which allows projects like this possible.

1) Hi there, when you get asked to do an animation like that, what is the creative process? Do you make sketches, animate in a tool like Flash or Maya or do you start right away with the code?

I find it helpful to sit with a step-by-step list of what is going to happen and really try to visualize the entire animation, getting a feel for how it will most likely function under the hood. If there’s anything I’m not quite sure how to handle I’ll break that out into a separate proof of concept sandbox file where I can just focus on that one thing and make sure I get it right. After that it’s easy to put all the parts together.

2) What is the main technology behind the animation? Canvas? CSS? And why did you choose it?

The animation was done entirely in CSS to take advantage of it’s ease of use and fluidity.
Although something similar could have been accomplished with Canvas, going that route would have required a lot more setup code and we wouldn’t have been able to take advantage of CSS3’s handy timing functions.

Also, being able to fire animation sequences with class names the same way you would work with basic styling is a huge plus.

In the case of this animation we were able to define just one keyframe that played with scaling and opacity, then applied that to all five flame layers, having the variations coming from just playing with the animation durations and delays.

3) I assume that the start page of Firefox is a special environment. What were the limitations you had to work around in terms of performance and connectivity?

Since the code that runs the animation is being loaded onto a pre-existing page, we do end up having to do a little bit of logic when it loads to adjust some of the initial content and move our new content into position before running the animation.

A Snippet is a single file of code that gets loaded onto a pre-existing page, therefor certain considerations have to be made. To remove additional requests for assets, any images have to be base64 encoded and entered directly in the code. This is much easier than it sounds. There are plenty of websites out there where you can upload an image and have it give you back it’s base64 encoding. I tend to use a couple of simple PHP commands that accomplish the same thing:

$image = file_get_contents('image.png');
$imagedata = base64_encode($image);

Also if an animation has to interact with content that’s already on the screen (and may be positioned relatively, which can cause problems with animations) a certain amount of work has to be done to structure the previous content to work with the new content (wrapping the moving parts in a container that can still move in relation to window size so you can absolutely position elements within that you need to, etc.).

4) When optimising you sometimes find yourself having to do the same tasks over and over again and build tools to do them. Did you use already existing tools or are you building some?

Developing on Macs we end up using the ‘Activity Monitor’ utility app quite a lot which can really help with monitoring memory and CPU usage. About:home snippets are a unique animal in that only Firefox users ever see them. For sites and web applications that are being viewed on a diversity of devices and browsers we have developed some internal tools that help simplify compatibility issues and greatly aid in the quick construction of projects that we’ll be releasing soon.

5) With your experience in this, do you think there is a market for animation tools that have output like the code you did? Do you know of any yet? There were a few around a year ago (Adobe Edge, Animatable…), but I haven’t seen any being pushed heavily.

There are definitely some animations where the keyframes can get so complex that these sorts of tools could help out a lot and save time. We don’t have a favorite yet, but we’re keeping our eyes open.

6) What about legacy support? Is it worth testing and tweaking on older browsers or does it make more sense to have a static image fallback?

It is always important to support a certain amount of legacy browsers, static image fallbacks can sometimes be your only reasonable choice.

7) If developers wanted to start with their own similar animations, what would you say is the biggest time-sink to avoid? What are good shortcuts?

It’s sometimes easy to get bogged down in animations that have a lot of moving parts, and go on for a long time. In those situations I find it helps to break things down into scenes that can be fired off with parent container class names.
Sometimes in those scenes I’ll apply the same animation duration to each element and work within the keyframe percentages to handle timing. This way it’s easy add adjustments to individual elements during the timeline later.

Thanks Bruce.

What do you think? Expect to see more experiments like this showing off new technologies. Anything you’d like to see, or information you’d want us to publish? Just comment below.

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…


  1. malexis

    Thanks for giving us a peek under the hood. The animation looks fantastic.

    July 25th, 2012 at 12:58

  2. Bollie

    How do I get rid of that ridulous torch on my Zigboom mozilla start page?

    July 25th, 2012 at 17:30

  3. Rainmaker


    Yes, I’ve been a Firefox user for a few years, which is my preferred browser. Thank you for that. I must say, however, the new addition of the flaming torch with MMXII I SERIOUSLY dislike. It looks like an illuminati message, and makes me very skiddish about continuing with Firefox. It might not have been the intention of the designer, but subliminally, something quite “other” is being communicated … and I hear that much louder than an Olympic motiff of celebration. In fact, the Olympic idea is obscured BY it, as this had already been accomplished without this logo through superb connection existing in Firefox. So, the “Mission” had already been accomplished. Anything burning right now is Not a positive sign, especially in Colorado and Wyoming.

    Thank you.

    July 25th, 2012 at 19:49

  4. Dmitry Pashkevich

    I don’t see the animation! Is it gone?

    July 26th, 2012 at 01:22

  5. Justin Dolske

    Dear rainmaker, there is nothing to worry about. Fnord.

    July 27th, 2012 at 12:14

  6. Donovan


    I Want it.

    Is there a way I can keep it up, after the Olympics are over?
    The work is beautiful and its an awesome way to remember the olympian within.

    And the work is terrific. I WANT IT !!!

    July 31st, 2012 at 16:43

  7. donovan

    Mr. Rainmaker,

    Its not really possible. Contrary to popular belief, In order for subliminal messaging to work, the hidden message must be well understood.
    Try it yourself. Listen to a foreign language you don’t know, then try to interpret it. Or read a short paragraph on Nuclear Giant Resonance, and do a few sample problems. Did your everyday experiences with the atomic nature subconsciously “kick in” to facilitate your understanding of a subject you may or may not know anything about? Nope. :)

    So the truth of communication is that it is totally dependent on common language, learning, and other such variables.

    In this case, the subject is the international Olympics. Not “other”, and definitely not unfortunate events elsewhere. (But my thoughts and hopes are with them.)
    As most international people are:
    – not aware of the ill you speak of,
    -aware but frankly don’t give a damn,
    -have consciously chosen for their mind to make other subconscious associations (Do you remember when Jesse Owens miraculously defied Hitler… to his face! It made Hercules himself overwhelmed with tears of admiration, so he uprooted a tree to wipe them.
    [or the munich olympics, or other ways people choose to value their lives])

    It becomes impossible for us (or them or whoever) to first interpret this message in the way that you mentioned.

    But you are able to do it. (You don’t admire Jesse Owens or what? Ebeneezer Scrooge!)

    Only until someone says (HEY! This is my interpretation and I don’t life It!)

    People in Africa, Asia and the Middle east see the same television stations and listen to the same music as us (if it isnt outlawed), yet they retain their own social customs and don’t adopt European or western social customs.

    The olympics are part of our mutual heritage. Its there man! its right there showing the world our own capabilities as a people and cannot be degraded by the selfish motivations of bs artists.

    Yet Mozilla should include an on off switch. There is always someone who looks at things differently. Thank God for freedom and democracy. :)

    August 1st, 2012 at 08:01

  8. Donovan

    Change my mind. I dont like it either.

    No sacrifices to idols.

    August 3rd, 2012 at 01:49

  9. cCc vAdEr

    Too great!! Love it!! =D any chance to get a sample??

    August 3rd, 2012 at 13:05

  10. Sharon

    I’d like to be able to simply remove these animations. They slow my computer down. I was relieved when the Olympic Flame disappeared and now have a little robot thing for android phones & once again it’s slowing everything down. How do I remove it. I’ve used Firefox for years & have always loved it because it was basic and didn’t get bogged down with lots of silly animations.

    September 17th, 2012 at 17:44

    1. Robert Nyman

      If you go into Preferences > General, you have the option to choose what page to display when Firefox starts. More information is available in the How to set the home page article.

      September 18th, 2012 at 00:18

  11. Donovan

    To the gifted executives and staff of Mozilla

    I think I can speak for everyone when I say the following,

    We can tolerate the strange animations, if mozilla is doing the important things…

    AkA. Not selling information to 3rd parties who may have offices in our respective countries, but are in fact based in the 3rd world.

    AkA. Not selling information to 3rd parties who utilize customer service reps from the 3rd world.

    AkA. Not providing user data to verification or credit agencies.

    These are the things I care about, I will tell you why.
    One day I wanted to activate a credit card, and the representative was in the Philippines. Thinking it was an American company, I was mildly offended. But then the representative asked me to verify the name of one of my family members, she asked me to choose between 3 names! I became terribly irate! (The audacity of that person asking me to name my family for credit!!!!!) Of course I refused.

    How is our personal information going to the 3rd world!!!!!!!!

    But seeing the beautiful torch does not offend me. I loved it.
    Seeing robots jumping out at people is slightly strange, but you stopped it.
    And seeing the Brittish Flag does not offend me even though I am American.

    Overall I say that I support Mozilla. Don’t feel discouraged from the emails you get about your graphics. And I hope you are not selling the privacy of our customers.

    Overall good job
    Good luck
    And God bless America.

    October 8th, 2012 at 09:52

Comments are closed for this article.