Animation, Framer, Prototype
Creating the Zero Inbox Animation

Creating the Zero Inbox Animation

When I saw the Zero Inbox animation by John Schlemmer, Motion Designer at Google, I loved the simplicity of it and the delight it brought to my face. I wanted to try to recreate a version of it using Framer. Follow along to create a version of it yourself. Here’s what the actual animation we’re striving for looks like:


Before creating any assets, first try to create the animation using basic layers in Framer.

To start, set the background color to match the blue sky.

Then create a layer that will act as the white outside circle. Give it an opacity of 0.5 and center it on the screen. To make it a circle, set the “borderRadius” property to 50%.

Create another slightly smaller circle, this time in yellow, to act as the sun and center it as well.

For the cloud, just create a rectangle layer and set it’s position to be the midpoint of the sun.

Here is what our setup should look like thus far:


Now that we have a basic template set, it‘s time to work on the animation. The white circle expands until it eventually disappears so let’s go back to where we created the circle layer and set it’s initial scale to 0.

Then create an animation object that will animate the white circle’s scale property to double the size while also animating its opacity to 0. I gave it an animation time of .5 seconds and set the animation curve to be linear but I encourage you to experiment with different curves and times to find one you like.

For the sun, go back and set its initial properties to have a scale of 0 and an opacity of 0.

Create an animation object to set both the scale and opacity to 1. We won’t bother with the rotating of the sun just yet because we won’t be able to see it rotate since it‘s a circle right now.

Just like with the background circle and the sun, set the cloud’s scale to 0 and create an animation object that will scale it to 1.

We’ll also want the cloud to move a little, so set the x value 50 pixels less than the current value and create another animation object to move it to the correct spot.

The reason we created another animation object instead of using the one where the cloud scales is because we’re adding a slight delay to the cloud moving animation.

There‘s just one other small detail — we want the cloud to scale from the bottom, left corner so we need to set the animation origin for both the x and y values. In Framer, the default animation is from the mid point of the layer which has a origin value of 0.5. A value or 0 is the top or left most and a value of 1 is the bottom or right most point. To set the origin to be the bottom, left, set the “originX” position to 0 and “originY” position to 1.

Since both the sun and cloud have a little bounce to them when they appear, lets give them a spring curve. Instead of having to set a curve for both of them, we can set a default spring animation curve to the top of the file. Play around with different values for the tension, friction and velocity until you find one you like. I’m going with a tension of 80, friction of 12, and velocity of 0.

To get the animation started, we’ll need to call the start function on all the animation objects we created.

Here’s what your animation should look like:


At this point, we can create images of the sun and cloud and then fine tune the rest of the animation. 

Go into Sketch or Photoshop to first make the sun. Create two squares of the same size, add a gradient to each one, and then rotate one of them 45 degrees. Then create a circle and overlay it on top of the two squares.


For the clouds, make a couple of white circles and then merged them together with the union operation. Then made a rectangle and put it at the bottom of the clouds and use the subtraction operation to create the straight bottom edge.


After exporting the images, we’ll put them into the prototype. Drag and drop the images into Framer and then update the layers we created earlier to include them — you may need to make some slight adjustments to your layers and animations depending on your image sizes.

To make the sun rotate, create another animation object. We could just as easily set the rotation property in the previous animation object we created to show the sun but we want the rotation to have an “ease-out” animation curve and time of 2 seconds.

Start the rotate animation with the other animation objects.

After the sun and cloud appear, we also want to create the animation to scale them back until they disappear. To do that, create a layer that will act as a container to all the layers.

Set the superLayer of the sun, cloud, and circleBg layer to be the container.

Another way we could do this is to do the opposite and set the container’s sublayers to these three layers.

Once the sun rotation animation stops, animate the container’s scale to 0. To make the container first zoom in a little, I played with some bezier curves to find the right values to achieve a similar affect.

Here’s the final animation in Framer:


It’s not perfect and there’s details missing like the cloud shadow and the way it moves but given that Framer is for prototyping interactions and less about these types of animations, I’m happy with the way it turned out. You can see the prototype and check out the full code here: 

Zero Inbox Animation with Framer

If you don’t already use Inbox by Gmail, check it out and get yourself to inbox zero to experience the delightful animation in person (you’ll also have a clean inbox!). There’s other great interactions and animations within the app as well. Also, be sure to check out the Material Design Guidelines if you’re interested in learning more about Google’s philosophy for design and motion.

Do you want to see more Framer prototype and animation walk throughs like this? Leave a comment below or share your thoughts with me on Twitter (@kennycheny). If you want to know when I post new content, join the mailing list and be the first to know.

Want more Framer content like this?

Share this Story

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

About Kenny Chen

Hi, I'm Kenny - a UX Designer from Los Angeles who believes that beautiful, subtle movement enhances the user experience and makes products more engaging, dynamic, and memorable. My goal with Prototyping with Framer is to help you design amazing interaction and animation prototypes.