top of page
Firefox Motion Design
Motion may sometimes feel like an afterthought or worse yet “polish”. For the release of Firefox Quantum (one of our most significant releases to date), we wanted to ensure that motion was not a second class citizen and that it would play an important role in how users perceived performance in the browser. We also wanted to create pockets of delight for the user.
Some examples of motions created for Firefox Quantum.
The first thing we did as a team was an audit of existing motions in Firefox across mobile and desktop. We documented them by taking screen recordings and highlighted the areas that needed the most attention. From this exercise, it was clear that consistency and perceived performance were high on our list of improvements.
An audit of current animations was performed and documented for Firefox on Android, iOS, and desktop to explore areas of opportunity for motion.
The next step was to gather inspiration for a mood board. From there, we formed a story that would become the foundation of our motion design language.
During this process, we remembered to asked ourselves:
How can we make the browser feel smoother, faster and more responsive?
Inspiration was collected and documented in a mood board to help guide the motion story.
With Photon (Firefox’s new design language) stemming from Quantum, we knew there was going to be an emphasis on speed in our story. Before starting work on any new motions, we created a motion curve to reflect this. The aim was to have a curve that would be perceived as fast yet still felt smooth and natural when applied to tabs and menu items. Motion should also be informative (i.e showing where your bookmarked item is saved when your tab is done loading) and lastly, have personality. We defined our Motion Story based on these considerations.
Motion curve
Our Mission Statement
The motion design language in Firefox Quantum is defined by three principles: Quick, Informative and Whimsical. Following these guiding principles, we aim to achieve a cohesive, consistent, and enjoyable experience within the family of Firefox browsers.
With our motion story and mission statement we started designing preliminary concepts to support these principles:
Quick - Animations should be fast and nimble and never keep the user waiting longer than they need to. The aim is to prioritize user perceived performance over technical benchmarks.
Panel and new tab animation.
Informative - Motion should help ease the user through the experience. It should aid the flow of actions, giving clear guidance for user orientation: spatial or temporal.
Left: Download icon animation indicates download progress. Right: Star icon animation shows the action of saving a bookmark and the location of the bookmark after it’s saved
Whimsical - Even though most people would not associate whimsy with a browser, we wanted to incorporate some playful elements as part of Firefox’s personality.
Icon animations with some whimsy.
The Photon project was divided across various functional teams all focusing on different design aspects of Firefox. With motion overlapping many of these teams we started opening communication channels with each that would directly impact our work. We worked especially close with the visual & interaction team since it didn’t make sense to start motion design on components that were not yet close to complete. We had regular check-ins to set a rough ordering/priority of when we would schedule motion work of specific components.
Once we had near final visuals & interactions, it was time to get into After Effects and start animating!
Explorations were done for every animation we created. Below are some variations I explored for a tab loading indicator.
Below is the animation we ended up using in Quantum. The indicator motion felt snappy yet smooth and gives the browser a little bit of personality and delight. The burst that fills the tab signifies when the site has loaded and is ready to be viewed by the user.
Once we had some animations designed it was time to get them implemented. Implementing animations became an interesting challenge for both us and the development team.
Rather than have a developer try to reproduce our motion designs through code, which can become tedious, we wanted to be able to export the motion directly. This ensured that the nuances of the motion would not be lost during implementation.
On top of this, we needed the animations to be performant in the browser, this meant the file sizes also needed to be small. This was done by using SVG assets and CSS animations.
We explored existing tools but did not find anything suitable that would be compatible with the browser. We created our own process and designed the animations in After Effects and used the Bodymovin extension to export them as JSON files.
Thanks to our amazing development team our method was made possible by writing a custom tool to convert JSON files into SVG sprite sheets. This tool became an essential asset in translating timeline animations from After Effects into CSS animations.
Page reload icon animation using a SVG sprite sheet.
Once the animations were live in Firefox we anxiously awaited feedback.
Thankfully the release was met with positive reviews. We were happy that we even got some kudos specifically for the motions.
I was over the moon when I saw this tweet from user Diane Alston referencing the tab loading indicator!
bottom of page