Pixate Tutorial: Creating a fly-out menu

Published in

Design + Sketch

8 min readMay 6, 2015

I recently started learning Pixate and it became my main tool of choice for prototyping animations. I use it on a daily basis and it helps me to visually show my engineer the types of interactions and animations I am thinking about and as a resource for the engineering team to refer back to as they build it in code. Pixate is another valuable resource for user testing and showing stakeholders a prototype compared to static mocks. I decided to start writing up tutorials for people to learn how Pixate works. In this tutorial we will create a fly-out menu and I will use Yelp assets as a real world example.

I also recommend checking out all the resources on Pixate’s education page which is a great place to start.

Note: There are different ways to create these animations and my prototype isn’t 100% the same as the one on Yelp but my goal is to teach you these concepts to help you get started on Pixate.

What you will create:

Step 1

Create an account on Pixate here and download all the assets you will need from this Dropbox folder that I sliced up from the actual Yelp app.

I also created and included a Pixate file titled, “Yelp.pixate” where you can see the complete version.

Download the Pixate app on iOS or Android on your phone so you can see this build out in real time and to be able to tap your phone to play with the animations.

Step 2

Create a new project and title it anything you like, I will title it “Animation Exercises”.

Create a new prototype within the project and title it, “Yelp animation” and for this tutorial I chose the iPhone 6 as my target device.

Step 3

After following steps 1–2 you will see the following:

Click on the assets tab on the top left which I highlighted in green for you and drag and drop in all the assets from the Dropbox folder that I created.

Note: You will be switching through the assets and layers tab often in this tutorial.

The following is what you will see after you import the assets from Dropbox:

Step 4

Drag and drop in the “Yelp-screen” asset and center it on your screen:

Step 5

Drag and drop in the “bg-blur” asset and make sure the top of each assets align so that the “bg-blur” covers everything but the bottom nav-bar:

Make sure the “bg-blur” asset is selected and set the Opacity to 0 on the top right in the properties section.

This will cause the “bg-blur” to disappear. We will create interactions and animations in the following steps to bring back the “bg-blur” when we need it.

Step 6:

Bring in the “main-icon” asset and cover the original main icon. I included a screenshot of the position properties for convenience.

Step 7:

Bring in the “x-icon” asset and place it right underneath the original main icon off the screen:

We will be creating animations and interactions to bring in the “x-icon” when the “main-icon” is tapped.

Step 8:

Bring in the following assets (camera-icon, check-icon and star-icon) and place them over the “main-icon”:

Set the opacity for (camera-icon, check-icon and star-icon) all to 0%.

Nice! You came this far ☺ All the assets have been imported and are now in the correct place. Now we will add “interactions” and “animations” to all our assets to start creating the final product.

Step 9:

Drag and drop a “tap” interaction into “main-icon” and “x-icon”. This will allow these assets to trigger other animations we will cover in the following steps.

To make sure you did this step correctly, you will see a tap icon under the interactions section under properties:

Step 10:

Select “bg-blur” and add two “fade” animations to this asset. You can drag and drop them over the asset itself (top left) or you can drag and drop the animations to the far right under the animations section:

For the first “fade” animation we will add the following properties, make sure everything is identical:

What this will do is when the main-icon is tapped, the “bg-blur” will fade to 100% opacity with a duration of 0.1 s and a delay of 0 s.

Open up your phone and try it out.

Note: You won’t be able to make the “bg-blur” disappear just yet by tapping on anything, we will add more tap interactions and animations soon to make it disappear.

For the second fade animation we will add the following properties, make sure everything is identical:

What this will do is that when the x-icon is tapped, the “bg-blur” will fade to 0% opacity with a duration of 0.2 s and a delay of 0 s.

Note: You won’t be able to see this just yet, so you won’t see any changes on your phone until we add more tap interactions and animations.

Step 11

We will now add two move animations to “main-icon”.

For the first move animation, we will add the following properties:

What this will do is when the “main-icon” is tapped, the “main-icon” will be moved off the screen.

For the second move animation, we will add the following properties:

What this will do is that when the “x-icon” is tapped, the “main-icon” will move back to its original position with a spring effect.

Step 12

We will now add two move animations to “x-icon”.

For the first move animation, we will add the following properties:

What this will do is when the “main-icon” is tapped, the “x-icon” will move to replace the “main-icon”.

Open up the Pixate app on your phone and try it out.

For the second move animation, we will add the following properties:

What this will do is when the “x-icon” is tapped, the “x-icon” will disappear and be replaced by the “main-icon”. Note that the “main-icon” comes back with a little spring effect due to the spring easing curve I applied.

Play around with the easing curve settings to see what cool animations you can come up with.