Touch And Animation

Take advantage of the power of touch to make users believe they are manipulating physical objects on your screen.

Now that so much of design is in the animations and transitions, I think developers need to learn more about design and designers need to learn more about development in order to be able to work on the animations directly in the code. However, there are a number of tools that help designers prototype animations in a less intimidating format. Here are a few:

  • Origami is a tool developed by Facebook that extends Apple's Quartz Composer program and makes it easier to prototype UI animation.
  • Avacado is a framework built on top of Origami that adds more tools to Quartz Composer
  • Framer.js is a tool that lets you prototype complex animations with fairly simple code.
  • Pixate also looks really promising. They are currently in private beta.

When you do start getting into the code, Apple has some great animation frameworks to work with. Facebook also came out with a really great animation framework called POP. We used it in Hours (see video) and absolutely love it because it makes it a lot easier to do some things that would be really hard to do with Apple's frameworks.

Speaking of POP, I actually did a tutorial on it to teach the basics. I also created a project on GitHub so you can follow along and change the code yourself.