A few Pixate “hacks”
Pixate’s my go-to prototyping tool when I need to test out quick little interaction ideas (I recommend Framer.js and Origami for more complex interaction). Pixate though, has some nasty limitations.
I’ve found a few creative ways around some of Pixate’s shortcomings, which I’m excited to share with you. So without further introductions, let’s get right to it!
POP ANIMATION ON TAP:
Tap feedback is, in my opinion, essential in interaction design. Pop animation when tapping stuff is one of my favorites. It gives elements weight, making the feel like I’m pressing down on something, and having it spring back up.
As you might already noticed, there’s no “Pop Animation” feature on Pixate. So we need to hack our own. It’s as simple as this:
It’s basically two scale animations. An initial linear animation makes it shrink quickly, followed by a spring animation to get it to jump back up to normal size (1x). Just add a delay on the spring the exact duration of the initial linear shrink to get them to activate successively.
HOLD INTERACTION AND RADIAL PROGRESS BAR:
These two are a bit tricky and are the more “hacky” methods on Pixate.
Let’s start with hold interaction.
Pixate doesn’t have “down” and “up” touch interactions as of yet. But digging further and you’ll discover that the drag interaction does have a “drag start” and a “drag release” function. Let’s use those to simulate the “down” and “up” interaction.
Create an invisible layer on top of the button you want to pretend you’re “holding down.” Give this invisible layer a drag interaction, but limit it’s drag range to only a few pixels:
Once that’s set up, you can now apply the “drag start” and “drag release” to any interaction you’d like. In this case, I’m activating several animations upon drag start, and returning them to their original state upon release. It goes something like this:
Now on the device where you’re running the prototype, just place your finger on top of the drag area and slide it, just a pixel, just enough to get it to detect that drag interaction. The idea is to get the general feeling of how that “hold” interaction will feel like in the actual product.
Radial progress bar
The progress bar is actually two half circles that rotate slowly, right side first, then left side, upon drag start. The two half circle assets are actually embedded within transparent squares, so that rotation is done from the center:
You need the following to build your own radial progress bar:
1. A square parent layer to help you line up everything. It should be the exact size of the squared half circle assets.
2. Two layers that are of equal height as your half circles, but half the width. These will be your clipping layers that will “hide” half of the rotation animation, giving the illusion that they’re appearing.
3. The two half circle assets, transparent PNGs
(btw, you could also just export the half circles and place them inside a squared invisible layers)
This is how it looks like:
Make sure “clipping” is turned on to hide the half circle assets.
By this point I’m hoping you can figure out what’s next. Simply give each half circle a 180 degree rotation animation upon drag start, first one side, then the other half circle with the delay set to the duration of the first one. Upon drag release, make them reset back to 0 degrees instantly.
In my particular case, I used an “inverted” radial progress bar where the assets completely cover the stroke underneath. It’s a lighter tone to make it seem like it’s an “empty” progress bar. Then I simply rotate each half circle into it’s clipping layer, creating the illusion that it’s actually the color underneath that is rotating (prototyping is all about illusions, isn’t it?).
Animate on scroll position:
What if you needed an element to animate exactly at a specific point on a scroll view, say at exactly -200pt, have a few menu items jump into view. There’s currently no simple way of achieving this on Pixate.
Pixate only offers continuous animation based on either a specific rate in relation to the scroll speed (rotate this element at 1:1 relation with the scroll speed), or have the animation spread across a scroll distance (rotate this element between 100pt and 200pt).
So the hack is simple. Use a secondary layer like orange square shown on the gif that’s not part of the scroll view. Why? You can do interactions based on a layers position, but not based on a scroll position. So we get a secondary layer to act like a scroll view, without being one.
So have that layer move at a -1 rate with the scroll view. Let’s call this layer “scroll position:”
Sweet! Now we have a way to precisely detect scroll position. I’ve set this layer’s limit at 100pt, at which point I want my PooButton to animate, then animate back when the scroll position is at 0pt.
Now just add some rules. For example, when the layer’s Y scroll position equals a specific value, animate!
Finally, just hide the scroll position layer outside the view.
— — — —
So there you have it, a few little tricks to get your prototypes to feel as close to the real thing as possible. I have several more that I hope I get a bit more free time to share.