Creating the Zero Inbox Animation in Framer
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 the popular interactive prototyping tool Framer and Sketch. 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.
# Set background to sky colornew BackgroundLayerbackgroundColor: “#669CF5”
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 background circle layercircleBg = new Layerwidth: 480, height: 480borderRadius: “50%”opacity: .5backgroundColor: “#FFFFFF”circleBg.center()
Create another slightly smaller circle, this time in yellow, to act as the sun and center it as well.
# Create sun layersun = new Layerwidth: 360, height: 360borderRadius: “50%”backgroundColor: “#fbe450”sun.center()
For the cloud, just create a rectangle layer and set it’s position to be the midpoint of the sun.
# Create cloud layercloud = new Layerx: sun.midX, y: sun.midYwidth: 204, height: 122backgroundColor: “#ffffff”
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.
circleBg = new Layerwidth: 480, height: 480borderRadius: “50%”opacity: .5scale: 0backgroundColor: “#FFFFFF”
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.
animateBg = new Animationlayer: circleBgproperties:scale: 2opacity: 0curve: “linear”time: .5
For the sun, go back and set its initial properties to have a scale of 0 and an opacity of 0.
sun = new Layerwidth: 360, height: 360borderRadius: “50%”backgroundColor: “#fbe450”scale: 0opacity: 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.
animateSun = new Animationlayer: sunproperties:scale: 1opacity: 1
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.
cloud = new Layerx: sun.midX, y: sun.midYwidth: 204, height: 122scale: 0backgroundColor: “#ffffff”animateCloudScale = new Animationlayer: cloudproperties:scale: 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.
cloud = new Layerx: sun.midX — 50, y: sun.midYwidth: 204, height: 122scale: 0backgroundColor: “#ffffff”
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.
animateCloudMove = new Animationlayer: cloudproperties:x: sun.midXdelay: 0.2
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.
# Set origin to animate from to bottom leftcloud.originX = 0cloud.originY = 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.
# Set default curveFramer.Defaults.Animation =curve: “spring(80, 12, 0)”
To get the animation started, we’ll need to call the start function on all the animation objects we created.
animateBg.start()animateSun.start()animateCloudScale.start()animateCloudMove.start()
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.
sun = new Layerwidth: 360, height: 360opacity: 0scale: 0image:”images/sun.png”cloud = new Layerx: sun.midX — 50, y: sun.midYwidth: 204, height: 122scale: 0image:”images/cloud.png”
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.
animateSunRotate = new Animationlayer: sunproperties:rotation: 315curve: “ease-out”time: 2
Start the rotate animation with the other animation objects.
animateBg.start()animateSun.start()animateSunRotate.start()animateCloudScale.start()animateCloudMove.start()
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.
# Hold all layerscontainer = new Layerwidth: 1000, height: 1000backgroundColor: “transparent”container.center()
Set the superLayer of the sun, cloud, and circleBg layer to be the container.
# Create background circle layercircleBg = new Layerwidth: 480, height: 480borderRadius: “50%”opacity: 0.5scale: 0backgroundColor: “#FFFFFF”superLayer: containercircleBg.center()# Create sun layersun = new Layerwidth: 360, height: 360opacity: 0scale: 0image:”images/sun.png”superLayer: containersun.center()# Create cloud layercloud = new Layerx: sun.midX — 50, y: sun.midYwidth: 204, height: 122scale: 0image:”images/cloud.png”superLayer: 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.
# Hide container when doneanimateSunRotate.on “end”, ->container.animateproperties:scale: 0curve: “cubic-bezier(0.6, -0.28, 0.735, 0.045)”time: .6
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.
Want to learn more about Framer?
Check out my blog, Prototyping with Framer for more Framer tutorials.
If you’re interested in a video course, where I take you step by step through the process of creating interactive prototypes with Framer, check out:
Rapid Prototyping with Framer
from O’Reilly Media
What do you think of Framer? Share your thoughts with me on Twitter (@kennycheny). If you think this could be useful to other people interested in learning Framer, please click the “Recommend” button below.
This article was originally published on Prototyping with Framer.
