Loading

Pixate Guide: Learn Basic Animations

November 14, 2015| destructive
Pixate General View

Creating prototypes can be a very different approach for many of us. Some prefer the ease of Flinto, while others would go for Framer, which requires coding. There are many more, but I find Pixate to be somewhat a cross between Flinto and Framer, with the convenience of checking your prototype on a real device. And the best part, is it’s free and looks great!

The first time I use Pixate, it was hard for me to understand the software. After going through the video tutorials on their site, then do I began to see their workflow methodology. To be clear, it is very much a programming style of workflow but in visual form. I like how it helps people like me who wants to gain that programming mindset, yet not be overwhelmed by it. Pixate truly tests your intuition and creativity, and the options are open to your ingenuity.

For this Pixate Guide on Basic Animations, I will use two screens from a redesign of Townske’s app. Once you have installed the app, open a new project and choose your phone template. Pair it with your phone that shares the same Wifi connection.

Importing screens (.png) can be done by going to Assets and dragging it into the column or clicking the + button.

Assets

1. Scrolling

Go to your Layers page and here is where you’ll add layers to activate animations and interactions. To do a simple scroll, make sure you first put the two screens side by side each other. Create a layer by tapping the + button. Adjust the size of the layer to fit the whole screen and adjust the color to Transparent.

scrolling

Now, you want to child the screens you’ve imported into that Transparent layer. You can do this by dragging it onto the layer at the Layers panel. Next, we will add a Scroll interaction to the Transparent layer. Drag it from the Interaction panel onto the Transparent layer. Adjust the settings – Paging Mode: Paging.

scrolling

If you’re still confused, here is another quick video tutorial on Scrolling.

2. Tapping

Tapping can be done in the similar way as Scrolling, and it’s by parenting the layers like this:

Tapping-1

The Transparent layer is still on top, while there is another Tap layer on a button. This layer is also transparent and resized to fit the button. Add a Move animation on the splash-screen as you want it to move once tapped. Settings are:

tapping-2

If you see, once we tap the button, we want the layer to move -375 pt away to the left to bring in the next screen (which is child to the Transparent layer).

tapping

3. Moving

Lastly, we will look into moving. There are many interactions that we can combine together. Yes, you can combine multiple interactions such as move, drag and rotate. With this, you can also set conditions. This is where some programming knowledge will come in handy. You can do more from applying conditionals such as >, < and &&. However, do not fret as you can learn it along the way.

Moving

This is how I applied a Scale animation to bring back the size of the image as I pinch it. I wrote a short IF statement for centre x and y of the screen to scale it back to original size (375 pt x 575 pt). I also applied the Drag interaction just for fun. You can apply 3 types of drag interaction – free, vertical or horizontal to suit your goal.

moving

As you can see, the interface is quite straight-forward but the process can be quite tedious. But once you’ve captured the in’s and out’s of this software, I’m pretty sure you’ll be as quick and efficient while using Pixate. I have included the entire project file for these 3 animations which you can download and learn from it!

Download it here — Pixate: Basic Animations

For more tutorials – Pixate Video Tutorials

Categories: Deploy Apps, Interaction Design, Prototyping, Tools

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe and Get 25% OFF!

Join our mailing list for cool freebies and updates. Promise, no spam :)

%d bloggers like this: