Facebook Paper menu button animation for Titanium

Your menu button icon doesn’t have to bee borking or just a static image. When Facebook released Paper app, it was full of sweet UI animations. Here is a quick tutorial on how you can make your own Facebook Paper menu button animation.

facebook_paper

To make this animation, we’ll create 3 views and use them as lines. When we receive a click event, we’ll have to hide the line in the middle and rotate top and bottom line.

Our CommonJS Module looks like this:
Filename: Ti.PaperMenu.js

Now that we have our commonJS module done, all we need to do is to call it through our main window.

Filename: app.js

Video demo

Here is a video showing the module in action.


  • Carlos H. Lustosa

    Awesome =)

    You can also do like this in the button handler: