Tab Animation

In addition to the UI and appearance changes we have been exploring for Firefox, we have also been exploring how to better improve the user experience through animation.

One area that animation would be very beneficial is with tab interactions. Specifically moving/arranging tabs on the tab strip, closing/opening tabs and tearing off tabs into new windows. Presently the feedback here isn’t as good or as elegant as it could be.

 

New Tab Animation

Some of the goals for animation are to make browsing feel faster, adding visual affordances that makes tasks more understandable and to make the browser more visually appealing. There is much more detail on the Wiki articles linked above. My goal was to quickly demo how this would actually look and feel because still images and wireframes can only convey so much.

Click the image below for the animation that shows how a new tab animation could look. It’s pretty short and fast.

Firefox - New Tab Animation - Preview Link

 

It is hard to tell from the video how this would work frame by frame. The general idea is that after you click the new tab button that button itself grows into the new tab.

Firefox - New Tab Animation - Frame-by-Frame

 

Tab Tear Off

This demo shows both tab rearrangement and tab tear-off.

Firefox - Tab Tear-Off Animation - Preview Link

 

Tags:

This entry was posted on Friday, January 29th, 2010 at 6:41 am and is filed under Firefox. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

88 Responses to “Tab Animation”

|
  1. Matthew says:

    Looks nice … but exactly like Chrome! Can we see something unique?

  2. Norman says:

    great work on the videos. Handling the Tabs like Windows7 handles its tasks in the taskbar is a great idea and feels just right. About the New-Tab-animation: will there also be a closing animation just like that?

  3. Mike says:

    This looks great. One thing that bugs me about dragging tabs around now is the number of ‘things’ that appear. You have the purple arrow that points to the insertion point, and the transparent thumbnail of the tab’s content, and various tooltips of the tabs that show their title.

  4. doop82 says:

    Tab moving looks great and intuitive, if you really are able to keep that fluidness. The idea for the new tab animation is good, but I would try to make a small pause after the “+” small tab turns into the blank new tab.

    What I think you need to communicate to the user is “this tab, when pressed, turns into a blank new one”, so the widening while the new tab appears looks good. That the “+” small tab is still there could be more discrete, maybe a fade in briefly after the blank new one appears, so that it won’t take the focus from the recently created content (which, for 4.0, is going to be a default home tab for the new tabs, I think)

  5. AaronMT says:

    These are very nice. From the mockup animations, I couldn’t tell what the purpose of the green + was on the tab tear. If that’s a button, how would one click it if one is in the middle of dragging mouse down?

  6. Stephen says:

    @AaronMT: It’s to indicate that you are in fact going to create a new window.

  7. Ken Saunders says:

    They’re both pretty damn sweet looking.
    I’m wondering though, won’t things like this require more system resources?
    I’m heading over to the wiki to learn more and perhaps answer my own question.

    I have nearly all Windows animations disabled. They do eat up resources and for me, waiting for and watching something fade in and out feels slower than something just appearing and disappearing.

  8. TheTechFan says:

    Hopefully there will also be animation when dragging bookmarks.

  9. Kurt says:

    Very nice looking! Love it!

    @Matthew, it’s like Chrome yes… but what’s so wrong with that? I don’t think I’d want it to work any other way. Chrome is great, but lacks the render engine Firefox uses. Chrome is god awful at displaying a website page. Tired of blank white screen every time you click a link.

  10. Karel Koubek says:

    I agree with Ken Saunders,
    if the animation takes more time than current behavior (which is practically instant), then it will actually feel slower to me. This is especially apparent with the new tab creation. Tab reordering doesn’t suffer from this problem, but it must be smooth as butter and react fast to my erratic tab pulling ;-)

    BTW, I have all animations disabled in Windows too.

  11. Kurt says:

    Just wondering Stephen, if you read this, do you usually have your Firefox window maximized or not? Just wondering regarding the new design.

  12. Ferdinand says:

    I love the animation in Chrome so it is wonderful that there is a similar feature for Firefox in the future. I think you should benchmark the animation on an Atom 1.6Ghz to be able to ‘prove’ to people that it won’t slow down Firefox. Everybody thinks Chrome is fast and nobody complains its animations.

  13. Thomas says:

    It’s awesome!

    However, the first animation should be a lot faster. It should not take more time than Firefox 3.6 to open a tab.

  14. Mathias says:

    Nice work, and much needed considering that Firefox lags in that department behind Chrome, Opera and Safari. I like the idea of the [+] growing into a tab, it’s just the last step that should be improved. Could the [+] separate from the newly created tab in an animated way ? The tab and the + could separate with a dent that grown vertically until the two items are fully separated (think cell mitosis).

  15. Nox says:

    Just please don’t remove tab duplication via ctrl+drag like it is in Chrome.

  16. Chris says:

    Looks awesome! I like it.

  17. Fritz says:

    A few things.

    There is no “cancel” in your mock up (or in Chrome). I like how in Firefox you can drag to the left… and then… just move it up to cancel any tab change movement. You cna’t do that in Chrome (partially because tabs up top). I think you should be able to cancel movement. I think moving the tab up should cancel any movement and you’d need to figure that out with animation (which is something we don’t have to worry about now). Of course, pulling down tears off a new tab and that looks _much_ better in Chrome / your mock up.

  18. Quxxy says:

    The new tab animation is lovely and smooth right up to the point where the new tab button detaches.

    If it was a sound, it’d be “swoosh-KLONK!”.

    It might be smoother if you start with the add tab button on white, transition to the new blank tab on grey (fading the colour, too) and have the new tab button slide out from behind the new tab. That way, there’s is the sudden change in colour.

  19. Chris says:

    @Fritz: The convention in most apps/OSes now is to hit Esc during a drag to abort, causing the object to “snap back” to its original spot. Works in OS X, Firefox and Safari (for tear-offs), but not in Chrome, surprisingly.

    @Stephen: Do you see this working with “Open in New Tab” interactions, especially now that Firefox opens these tabs beside the current one? Could they use the same “cell splitting” effect as the New Tab button?

  20. Ken Saunders says:

    Chrome, Chrome, Chrome, Chrome, Chrome, Chrome.
    Seriously guys. It’s Firefox development. Not an attempt to appease Chrome users or Firefox part time users.

  21. Guinea says:

    If it is possible to make it as fluid and responsive as it seems in the mockup video even on *older hardware* (important!), then it’s great! :-)

    You didn’t show any tab close animations. This is just eye candy mostly, but one thing that really does make a big usability difference in how Chrome handles tab closing is how the close button of the next tab slides right under the mouse pointer, and stays there until the mouse is moved away. This way it is possible to easily close several tabs without needing to aim the mouse many times (which is an annoyance—a relatively small annoyance, but an annoyance nonetheless). Please consider implementing this feature too. Usability/functionality are more important than eye candy.

  22. Wizi says:

    Check out Opera 10.50 alpha, they did the same way. And the JavaScript performance also rocks :-)

  23. Mr Lizard says:

    Will Firefox begin loading the page while the tab animation is in progress?

    This would be ideal, as most/all of the page will be loaded by the time the animation is done.

  24. Nice! The new-tab morphing really helps show what’s happening. The tab dragging is pretty nice too; although I’m not sure about displaying the system windows buttons (minimize, maximize, close).

    There’s also the possibility of disabling these effects if the OS’s settings have animation turned off.

  25. Mikael says:

    Looks nice! Animating the tabs makes the browser experience much nicer. The changes you are doing to Firefox 4.0 makes me want to use Firefox again! I do however prefer the way that google chrome handles tab tear off by making a miniature of the site. Also don’t forget to make it possible to close several tabs from both ends without moving the mouse. Keep up the good work!

  26. XstyleOne says:

    I agree with the other guys…it’s Chrome all the way…but…it’s nice to see this in my favorite browser Firefox!

  27. SUGGESTION FOR TAB ANIMATION
    On the picture with the sequencing of tab animation, with the 6 rows, skip row five and have the new tab button slide directly out of row 4, kinda behind the new tab, rather then have the new tab open and then weirdly snap smaller.
    Comments?

  28. Kurt says:

    Just wondering do most of you guys use Firefox maximized on Windows even if you have a large monitor?

  29. Ferdinand says:

    @Kurt: I have a 1920×1200 24 inch monitor and I use Firefox maximized without menubar, statusbar and bookmarks bar. I only have the titlebar(which I would love to lose), tabbar and navigationbar. I zoom most websites to 150% and it is wonderful that Firefox remembers that per website.

  30. Joe5 says:

    I really like this! But… FF might as well just take the looks and animation of Chrome. I think Google got it right with the simplicity and elegance of design. If Mozilla could incorporated a similar elegance and smoothness to Firefox, maybe speed up the load time, then it would truly be the un-beatable browser. From what I hear, FF 4.0 is going to be similar to this. If that’s true.. then I’m very excited!

  31. [...] Stephen Horlander has released a couple of videos showing the plans for animating a few Firefox tab tasks like adding a new [...]

  32. Erunno says:

    Chrome actually copied the tab sliding from Safari on Mac. Seriously, not everything cool originated from Chrome. The Google people were just smart enough to implement the best features from other browsers (e.g. non-modal dialogs, inline search) and mixed with some good ideas of their own (e.g. the tab closing behaviour).

  33. sabret00the says:

    Loving the tab tearing behaviour. I have for a long time felt like there wasn’t enough focus on how that happened, this fixes all of that.

    The rest of the tab animation is nice. but I don’t think I’d really care if it was on or off unless it slowed stuff down, at which point it’d have to go off.

  34. Plymouth says:

    This is not exactly related to this blog post, but I saw your mockups for WinXP on the wiki, and how you tried to blend everything with the title bar, in all 4 visual styles available for XP.

    Perhaps that’s not the best way to do it … remember when Safari 4 started messing with the title bar? It turned out to be awful, and they actually changed it afterwards:

    http://cache.gawker.com/assets/images/lifehacker/2009/02/safari4b-topsites.png

    On WinXP it’s not a big deal if the window border doesn’t look completely “native”. Not even MS programs look native any more, just look at Office 2007, Windows Live Mail, Messenger, etc., or from other companies, Chrome: Adobe CS4 suite, etc. These programs don’t look out of place of unusable (unlike the first version of Safari 4 did).

    If you are going to change things about the title bar / window border anyway, then you might as well draw a custom, space- and usability-optimized version yourself, with Vista-style close/maximize buttons (like in Chrome & many MS programs), rather than investing a lot of effort into trying to imitate the native style, and not really succeeding at it. The XP title bar it too wide anyway for this kind of thing.

    To recap: XP users probably care more about usability and space efficiency (people who use XP are likely to have smaller screens …) than a precise imitation of the native title bar, so why not just go with the same design that’s used with Aero (except of course without the fancy transparency/blurring that doesn’t work)?

  35. [...] more details and Tab tearing animations with affordance move to Stephen blog. Also Read [b²] Animated Gmail Notifier Based On Adobe AIRKonqueror – File Sharing and [...]

  36. Stephen says:

    @Plymouth: The problem with the Safari implementation is that they totally took over the titlebar for tabs. Which was very awkward for a few reasons; even if it was a more accurate hierarchy of elements. I appreciate the experiment but I think it is obvious that it didn’t work out very well.

    I am not proposing we take over the titlebar but rather mesh with the native OS theme. There are already a lot of ideas being floated that aren’t exactly XP native. Ideally I would like to capture as much of the native look and feel of a user’s environment without letting it constrain the design absolutely.

    It might be that we can get closer to the Aero style and save some space while still managing to blend in. I will do some experiments with that. Thanks!

  37. [...] fun and easy for the users. Revamping the UI seems to involve animations as well. Stephen Horlander released two videos depicting the New Tab animation and the visually appealing Tab Tear [...]

  38. Adam says:

    This looks great as long as there is no hesitation in the animation. One concern I have over adding animation overall is highwe levels of hardware requirements and resources. For me I just want functionality yet keeping a low consumption of resources and minimal hardware requirements. Not everyone can afford a new computer/upgrades every few years.

    Maybe it would be nice to have an option to turn off animations and other resource intensive features.

  39. Asa Dotzler says:

    I love how you’re picking up more of the Windows’ behaviors. This feels a lot like the Windows 7 Taskbar drag and drop for re-arranging your apps. I think the more we can emulate the good bits of Windows, the better.

    (Yes, for those of you saying this is copying Chrome, this is an original Windows behavior, not a Chrome invention.)

  40. [...] Stephen Horlander has been hard at work, working on tab animations for the next version of Firefox, Firefox 4.0. The aim is to improve the [...]

  41. [...] Horlander z Mozilla Corporation se na svém blogu rozepsal o možnostech využití animací a hned přidal i dvě ukázky: otevírání nového [...]

  42. Paul Gupta says:

    I love this. Yes it looks like chrome, but it’s also similar to the way we interact with tabs on any number of Mac applications and the new Windows 7 taskbar.

    YAY standardization!

  43. [...] termine avec Stephen Horlander qui a, récemment, réalisé quelques mockups concernant l'animation des onglets. La première [...]

  44. [...] Sin lugar a dudas un vistazo a la bola de cristal que vale la pena, a apenas un clic de distancia. [...]

  45. Plymouth says:

    I didn’t really like any of the default Firefox themes esthetically since Firefox 2. Finally, this one is shaping up to become one of the best designs ever, both esthetically and functionally. Based on this and the previous mockups you made, I trust that no matter how exactly it turns out when it is finished, it is going to be great.

  46. [...] Stephen Horlander (colaborador de Mozilla) ha publicado en su blog un par de vídeos mostrando las ideas que pretende incluir en un [...]

  47. [...] i filmati appena pubblicati da Stephen Horlander (designer molto attivo nel progetto Firefox) sul suo blog, dei concept di animazione per le schede del prossimo navigatore del panda [...]

  48. [...] i filmati appena pubblicati da Stephen Horlander (designer molto attivo nel progetto Firefox) sul suo blog, dei concept di animazione per le schede del prossimo navigatore del panda [...]

  49. FF3.6greatmanyreasons says:

    @ #1 Matthew: Sort of. The new tab doesn’t come from the new tab button in Chrome. In this Firefox mockup, it does.

    @ anyone:
    Continuing on from what Asa said, Windows XP has had this since 2001 (default settings). Opera had tabs on top and “Paste and go” before Chrome. Chrome isn’t as revolutionary as people like to think. Make sure you try out Firefox 3.6. Guys remember Mozilla gets a significant revenue from Google through their search box deal, so if you really want to switch to Chrome do these steps so it looks like it came from firefox:
    Right-click the address bar, click “Edit search engines” and make another search engine the default, select Google, click “Edit…” and in the URL: textbox replace the text with:
    http://www.google.com.au/search?q=%s&rls=org.mozilla:en-US:official&client=firefox-a

    %s being the search terms and the rest identifying the search came from . I’m not sure but you might have to change the user agent string as well. Doing this will also remove the site you’re on being sent to Google.

    Firefox is the #1 browser for choice. I’d rather have NoScript, SSL 3.0, TLS 1.1, the most easy way to get my bookmarks out, low memory consumption, over 6,000 addons, themes, 35,000 personas (hover to see), jetpacks, option to disable plug-ins, check for up to date plug-ins, accessibility, be able to read the title of my tabs, disable/re-enable images, ability to cancel the moving of tabs (hit escape), changing the user agent string, access to about:config to configure the browser the way I see fit and choice, all of which Chrome doesn’t have, not to mention privacy implications.

  50. Hung says:

    So, how the closing-tab look like?

  51. manuel says:

    man… if you wanna make a good thing,remove the space on the top of the windows like chrome did,because this is the real good thing of her design.

  52. @ The Looks-Like-Chrome-Brigade says:

    What the fuck guys? They are fucking tabs, how do you think they should be animated??

    @Stephen Horlander : you work looks nice, keep it up

  53. [...] non ha impedito a Stephen Horlander – sviluppatore della UI di Firefox – di pubblicare un’anteprima del proprio lavoro sul suo blog, con tanto di video esplicativi: fin qui tutto normale, se non fosse per il fatto [...]

  54. Anton Felix says:

    The looks are good… but this interface will not allow the user to swap the tabs

  55. [...] dettagli per l’uscita e qualche immagine di come potrebbe essere,recentemente dal blog di Stephen Horlander,è stata presentata una interfaccia per Firefox 4.0 in due video differenti che corrispondono un [...]

  56. [...] Tear Off via Tab Animation Chromatic Pixel A person hears only what they understand. Reply With Quote [...]

  57. [...] appear in Firefox 4.0. Now one of the contributors to Firefox has posted a couple of videos showing how browser tabs might work in that version of the popular web browser. The videos highlight something that’s a bit [...]

  58. [...] appear in Firefox 4.0. Now one of the contributors to Firefox has posted a couple of videos showing how browser tabs might work in that version of the popular web browser. The videos highlight something that’s a bit [...]

  59. [...] di Google Chrome, ma ora uno dei collaboratori che lavora alla nuova interfaccia del browser, ha pubblicato delle novità che riguardano il comportamento delle schede sulla [...]

  60. Brian says:

    I would like tabs to stay on the bottom or at least make it configurable. Having them across the top like Chrome makes for a further distance I have to travel with my mouse pointer.

  61. Harley says:

    Sorry, but the “New Tab” animation doesn’t look quite right to my eye. With mouse-down the Add tab should become white like a focused tab, with the “plus” sign remaining. When you let go of the mouse the “plus” sign disappears and the tab stretches to full width. Then a new Add tab appears — either by sliding in from the left or by fading in.

  62. [...] Tab Animation « Chromatic Pixel: Uncategorized none Edit in Admin [...]

  63. [...] appear in Firefox 4.0. Now one of the contributors to Firefox has posted a couple of videos showing how browser tabs might work in that version of the popular web browser. The videos highlight something that’s a bit [...]

  64. khebs says:

    Your just making Firefox more memory eater!!!

  65. [...] Al crear una nueva pestaña esta no sólo aparecerá de la nada, sino que se deslizará de derecha a izquierda (véase la imagen superior para una idea aproximada de lo que decimos). Al arrastrar la pestaña de un lugar a otro de la barra donde se posicionan el resto, todas las pestañas abiertas se deslizarán para conseguir espacio para el reposicionado de la nueva pestaña. [...]

  66. [...] pojawiły się w blogu jednego z twórców przeglądarki. Nie są to oficjalne screencasty, ale animacje komputerowe [...]

  67. GRiNSER says:

    I’d like to see real glass in the tear off thumbnail as well as in the CTRL+Tab tab switching preview…
    Doesn’t look natural otherwise…

  68. [...] implementar animaciones en las pestañas al más puro estilo Chrome. Esto fue dado a conocer hace unos días por Stephen Horlander y además de la imagen que acompaña a la entrada se pueden ver unos vídeos con estas nuevas [...]

  69. Zirro says:

    @khebs: Considering that Firefox is best on memory handling of the current browsers (see http://dotnetperls.com/chrome-memory and http://lifehacker.com/5457242/browser-speed-tests-firefox-36-chrome-4-opera-105-and-extensions?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:%20lifehacker/full%20%28Lifehacker), that probably won’t be an issue. I don’t think these changes would do much anyways.

  70. [...] videos and images on Stephenhorlander.com ‘s [...]

  71. [...] Horlander de Mozilla ha publicado una serie de vídeos mostrando los planes para algunas tareas de Firefox, como añadir una nueva [...]

  72. FeRHaD says:

    In fact I don’t know why these animations are needed! Just for visual perfection?
    Or just to hung up my CPU. :)
    Also nearly all the browsers will have this animation, so what is the difference between them? Thus, it is certain that any of these animations don’t make one browser good.
    Firstly, they should all be stable and standarts compatible…

  73. Tim says:

    Wow, its very good

  74. Max says:

    I like ‘em. I hope these will be added in Firefox 4. And you know just add an option to turn them off for all those who don’t like it or think it will use up all the CPU. Then everybody wins.

  75. I know this is rather late in the game, but I have a functionality proposition, since we’re talking about tabs.

    There should be a way to select multiple tabs to drag them off. Say, Ctrl-click or Shift-click multiple tabs, and then drag them off as a group to form a new window with all those new tabs.

    I find I need this functionality quite commonly when I’m doing art research. I push the tabs on firefox- 30+ tabs per window, 3 to 5 windows, commonly. I move different groupings of sites into different windows; usually what I have to do is copy-and-past links or drag each tab from one window to another, but it’d be a nice time saver if you could just ctrl-click several odd tabs and drag them off,creating a new, organized windows.

    Thoughts?

  76. [...] chromaticpixel for a video of the picture on the left. Also check out [...]

  77. Firefox_user says:

    Just worry about the start up time, the rest will follow. If the start up time is not as fast or faster than Chromes is then I think that Chrome will dominate the browser competition rather fast.

  78. MX says:

    Any chance this will be in the first Beta of Firefox 4? And it there a estimated date set for the beta release?

    It looks really cool and in my opinion is a major missing feature form Firefox.
    Because the average user will noticed three things when they ‘try out a browser’;
    The speed, usability and how cool it looks. That’s one thing Google’s Chrome has over Firefox at the moment, but will change when Firefox 4 is released.

  79. tazzer says:

    @76

    There’s probably an addon for that.

  80. G13 Media says:

    I like the idea of the new tab growing vs just flashing instantly on, gives it a more smooth effect. Firefox 3.6.4 at least doesn’t crash when a media plugins crash now.

  81. SuezanneC Baskerville says:

    How do you turn off the tab animation?

  82. [...] dettagli per l’uscita e qualche immagine di come potrebbe essere,recentemente dal blog di Stephen Horlander,è stata presentata una interfaccia per Firefox 4.0 in due video differenti che corrispondono un [...]

  83. seleko says:

    It madness making all this animation without way to disable!
    Anybody know how to switch it off?

  84. gluxon says:

    Starting from Firefox 4 Beta 4, there’s a boolean value in about:config called browser.tabs.animate

    Toggling it to false will disable all tab animations.

  85. notzed says:

    Hmm, does that get rid of the horrible slow sliding/tab thing as well? That’s how I got here – finding out how to remove it.

    What is it with these animations? All they do is make all software feel slower, clunky and really ruin the `experience’ (whatever that is supposed to mean, i don’t `experience’ my computer, i tell it what to do). I find it terribly annoying even on a 12 ‘core’ intel cpu with nvidia gtx 480 card so it isn’t the hardware. And it’s getting hard to find all the hidden settings to remove them.

    It made the original mac feel slow and clunky and it just makes the latest hardware feel slow and clunky. I really fail to see how sliding chunks of screen around whilst apparently not doing what the user asked for is in any way a good thing. I open hundreds of tabs a day, and never even look at the toolbar whilst they’re opening, what a complete waste of effort.

  86. Tom says:

    Deactivate this in Firefox:

    - Type in “about:config”
    - Confirm the warning message
    - Search for “browser.tabs.animate” and set this to “false”

    greetings Tom

|