Animation, Framer, Prototype
Twitter Birthday Balloon Animation

Twitter Birthday Balloon Animation

Twitter recently added a feature where you can add your birthday to your Twitter profile. Whoever goes to your profile on your special day will see lots and lots of celebratory animated balloons. In this Framer (and Sketch) tutorial, we’ll prototype this simple animation. Here’s what this animation actually looks like from the Twitter iOS app:

twitter-balloons

We’ll first need to create our balloons using Sketch. If you don’t have Sketch, you’re free to use Photoshop, Affinity Designer, or your favorite design tool. 

Use the shortcut key “o” for the oval shape and then hold down shift to create create a circle that’s 140 x 140 pixels. Once your circle is created, double click the circle to edit it and then hold down shift and press the down arrow four times to move the bottom portion 40 pixels. Select “Straight” for the path.

balloon-sketch-1

Create a small rectangle using shortcut key “r” that is 10 x 6 pixels and overlay it at the bottom of the shape we created earlier. I like to zoom in and then move the rectangle one pixel at a time with the arrow keys to be precise. Once you have it aligned, select both layers and click the “Union” button to make it one shape.

balloon-sketch-two

To create the string, create two rectangles and set the background color to yellow — #F3C861. The long string will be 2 x 106 pixels and will be centered below the balloon. The short string that goes around the balloon will be 12 x 2 with a 1 pixel border radius. Place it on top of the balloon where we joined the circle and small rectangle earlier. It should look like this:

balloon-sketch-3

To create the bottom of the balloon, create another small rectangle that is 14 x 2 with a 1 pixel border radius. An easy way to do this is to select the small rectangle we created earlier and duplicate it using command+d. Then update the width and color and place it on the bottom.

balloon-sketch-4

We’ll create another oval for the balloon’s reflection. We’ll make it 44 x 26 pixels with a 33 degree rotation. You can either type it through the property panel or rotate yourself by holding down command when at the corner of the oval layer and dragging. Place it on the top, left part of the balloon and make the background white, with a 25% opacity.

balloon-sketch-5

All that’s left to do is to set the balloon’s color. Select the balloon, including the bottom portion and set the background color to purple — #A332E6. Give the balloon an opacity of 75% but keep the opacity of the bottom part of the balloon at 100%. Here’s what it should look like:

balloon-sketch-6

Select all the layers and put them in a group using command+g. Then duplicate the group 4 times using command+d. 

balloon-sketch-seven

Then just apply a background color to the other 4 balloons. Here’s the hex values I used.

  • Yellow — #F9D000
  • Red — #F0325E
  • Blue — #34A1F9
  • Green — #38DA9C

Update your group names to their respective colors and you’ve got your birthday balloons.

balloon-sketch-8

For the Twitter profile, just take a screenshot from your phone. The only thing we’ll need to do is make the bottom tab a separate layer, since the balloon’s appear from behind it. To do that, just double click the image, select the bottom tab, and press command+d to create a layer of the selected image. We can verify that the tab is a separate layer by hiding the Twitter profile layer.

balloon-sketch-9

We’ll rename the profile layer to “profile” and the tab layer to “tab”.

Now just export all 5 balloons, and the profile and tab images. We’re ready to move on to Framer.

Open up Framer and drag the profile image into Framer Studio. Update the layer name to something more meaningful, like “profile.” 

We’re going to create an array called “colors” that holds our balloon colors so we can randomly select a balloon to show. Add each color to the array, making sure that it’s the same name as our balloon image files. We can separate each item in the array on a single line with a comma.

Or on separate, indented lines, without a comma.

Drag and drop all 5 balloons into Framer Studio. These balloons should appear on top of one another in the top-left corner.

import-balloons

We’re eventually going to delete these but this is just a shortcut so the images will go into our images folder, rather then us having to do it ourselves. We’re going to reference some of the property information, like width and height, when we generate our balloons before we delete these. 

We’ll create a for loop that will generate a balloon and animate it to the top of the screen. We want it to create 30 balloons so we’ll denote the number range from 1 to 30 using two periods. Two periods includes the upper boundary (30) from our number range.

We could also write it with three periods, which excludes the final boundary, so it would be something like this

Within our for loop, we’ll want to choose our balloon color. We’ll use the utility function randomChoice, which randomly chooses an item in an array. To use it, we’ll call the function and pass in the array we just created . The function returns the random item, which we’ll assign to a variable called color. 

We’ll then create our balloon layer, giving it the width and height of our balloon images we imported earlier. In my case, it’s 140 x 286. 

We’re going to set the x position to be at a random place along the screen by using the randomNumber utility. The randomNumber function takes in two arguments, which is the range of the number returned. We’ll allow the balloon to initially be set at most half way on either side of the screen. Since our balloon width is 140, we’ll use -70 for our minimum range and Screen.width + 70 for our maximum. 

For the y position, we’ll want to set it right below the tab bar. Since we don’t know the tab bar height yet, we’ll just set it to the bottom of the screen minus the balloon height for now so we can see what’s going on.

You should see a bunch of blue layers now at the bottom of your screen.

twitter-balloon-layers

Finally, we need to specify the image path. We’ll set the path where the balloon images are and use string interpolation, which replaces variables with their corresponding values, for the random color we generated. We use the hash sign and place the color variable between curly braces for string interpolation.

You should now see the blue layers replaced by balloons of random colors.

twitter-balloon-images

We can now go back up in our code where we imported the five balloon images and delete them.

Now that we have our balloons, let’s animate them. We can animate layers by typing the layer name followed by a period and then animate. 

We can then specify the properties. We’ll animate the balloon past the top of the screen. Since my balloon layer’s height is 286, we’ll need the balloon to go to an x position of -286. We’ll use balloon.height instead of hard coding in the number, in case we ever decide to update our balloon images.

We also don’t want the balloon to just go straight up, so let’s also give it a random x position to animate to that is 100 pixels to the right or left of it’s current position. For that, we’ll use the randomNumber utility again.

Here’s what it should look like:

balloon-animate-1

You may notice that the balloons are going pretty fast so let’s specify an animation time. Again, we’ll use the randomNumber utility to give each balloon an animation time between 2.5 and 3.5 seconds.

It’s looking better.

balloon-animate-2

We also want to space out the balloons so they don’t all come from the bottom at the same time. We’ll give each balloon a delay. By now, you should know we’re going to be using the randomNumber utility again. Let’s give it a delay from 0 to 5 seconds.

Here’s how it looks now:

balloon-animate-3

The final thing we want to do with our animation is to specify the animation curve. The default Framer animation curve is “ease-in-out”, which starts fast, slows down, and then ends fast. We want it to start slow and end fast so let’s update the curve to be “ease-in”.

To wrap up our prototype, let’s drag and drop the tab image into Framer Studio, give it a better name, and set it to be at the bottom of the screen by subtracting the tab height from the screen height. 

The balloons now appear behind the tab bar. 

twitter-balloon-tab

We’ll want to update the initial y positions of the balloons aren’t shown initially by setting it to the same position as the tab bar.

You may have noticed in the layer inspector all the “balloon” layers we created. Since it’s a small prototype, this is generally fine but if this prototype was generating infinite balloons , it could become a memory problem. We can solve this is to listen to when the balloon animation ends and then remove the layer using the destroy function.

If you view the prototype now, you’ll notice in the layer inspector the balloon layers being removed one at a time.

balloon-animate-4

Here’s our completed Framer prototype:

balloon-animate-5

You can check out the prototype and download the project here:

Twitter Birthday Balloon Animation with Framer

If you want to expand on this prototype, you can try chaining the balloon animations so it floats to one side and then the other instead of it only going in one direction right now. You can also play with the random number values, number of balloons, and other animation properties to put your own twist on it. If you haven’t already, check out some of my favorite Framer utilities, including some we used in this step-by-step walk through.

Do you want to see more Framer tutorials like this? Leave a comment below or share your thoughts with me on Twitter (@kennycheny). Join the mailing list and be the first to know when I post new Framer tutorials.

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.