Loading Animations #3: Asana’s Logo Animation

Asana did a redesign last month. If you’ve been using it yourself recently, you might have noticed this loading icon:

Before I dove in and looked at the actual implementation, I thought I should try to replicate it myself first. I started with just three divs, and positioned them using translate to match the Asana logo:

Image for post
Image for post

I then added rotation to the container:

Image for post
Image for post

And then finally translating and scaling the individual circles to grow and shrink the radius of the logo. Here’s the live version:

The toughest part of making this animation is getting just the right cubic-bezier values to make it look like the original one. This is where the developer tools really helped. I just dragged the knobs to get the graph that I wanted.

Image for post
Image for post

However, it turns out that the actual implementation is different from what I made …

How Asana’s Loader Actually Works

Image for post
Image for post

As for the animation, the three circles actually intersect each other instead of just having its radius reduced to zero (which is what I did). Here’s a video of that:

Other than that, the scaling and the rotating parent element were the same. You can check it out for yourself in this Pen!

Final notes on Asana’s implementation

Image for post
Image for post
  • -moz-transform: Firefox 15 was the last version to use this vendor prefix. That was released 3 years ago.
  • -moz-animation: Last version was also Firefox 15.
  • -o-transform: Opera 12.10 no longer has this prefix. This was released 3 years ago as well.
  • -ms-transform: IE 9 was the last browser to support this prefix. This was released 4 years ago.

You also get this page if you try to access it with any of these browsers so they can absolutely go away!

Image for post
Image for post

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store