Complex Interactions with Pixate

I recently set out to produce a particular interaction using Framer, Origami and Pixate for the sole purpose of finding the fastest tool to incorporate into my workflow. My struggles along the way could be compiled into a post of their own, but long story short, I’m blown away by how easy Pixate makes it to create interactive prototypes.

For those unfamiliar with Pixate, it’s a new visual prototyping tool for iOS that’s very easy to use. You're able to create layers and assign assets to them before applying actions and animations to build a working prototype usable on your mobile device. If you're familiar with Photoshop, Sketch or similar software there will be almost no learning curve once you're inside the app.

Here is what we'll be creating:



Step 1. Creating our layers



We'll need to create a handle and a hit area, so draw a  hitArea at 100 x 100pt and ahandle at 50 x 50pt. The size of these will be relevant later. Be sure to appropriately name these layers, as well.

Step 2. Making our handle draggable



From the actions panel on the left, let's drag the Drag interaction on top of ourhandle layer. This will also create a Move w/ Drag animation that will allow our handle to be moved to anywhere on the screen. Without any further tweaking, letting go of the handle means that it will stay exactly where it was released, so we'll need to add an Move animation to force it to snap back to its original location. 

Note: We'll be deleting this animation at the start of the Step 3, but for now we need it for the purpose of making note of our handle starting coordinates and testing our animation to make sure it will actually work.



Drag the Move animation onto our handle just like we did with the Drag a bit earlier. We want it to snap back to the starting position once we let go, so make sure its position is based on the handle Drag Release. After that let's set the Easing Curve to spring with the default settings to give it a nice bounce effect once we let go.

All we're doing here is moving our handle back to it's original position, which in this case was 136pts from the left, 468pts from the top (this example was built on an iPhone 5 and your point values will vary across devices).

If you're not sure where any given element resides on the canvas, you can always click on it to reveal it's positioning in the Properties Panel.

Step 3. Snapping the handle to the hit area

Now that our handle is behaving correctly, let's add a condition that will allow it to either snap to our hitArea if it's inside the square or snap back to the start position if it's not. The first thing we want to do is delete the Move animation we created in the last step and and replace it with a new one. This will be contain both an if and else condition. Let's add our first one:

handle.y <= 124 && handle.y >= 50 && handle.x >= 106 && handle.x <= 170


Let's break down what's happening:

Now that we're checking to see if all of the above conditions are true, let's snap ourhandle to the center of the hitArea. We do this by entering the coordinates of the center of the hitArea in the Move to: field. In my case (iPhone 5) that would be 136pts from theleft83pts from the top. Finally, if we apply another Easing Curve with the default springsettings, we get this:



You'll notice that our handle snaps perfectly to the center of our hitArea when we place it inside, however since we deleted our original Move animation, it will no longer snap back to the starting position if we miss the hitArea. Let's fix that with an else statement.

Below the first condition, click on the blue +Condition link to add an else statement. Here we'll plug in our exact coordinates from our deleted Move animation in Step 2, giving us our final animation.

You're done

Check out the final interaction below to see how far we've come from a simple draggable square. 



With some small tweaks you can start to add smaller details to your interaction and give it a more personal touch.

If you have any questions, you can reach me on Twitter.