Animating with Physics

When Facebook launched Home I was very impressed, the interactions were well thought out and the result is stunning. My eye was drawn especially to the way the menu items get sucked in to the home button. While watching a video […] HTC First with Facebook Home Hands On by The Verge something Joey Flynn (the designer) said piqued my interest. Here's a transcript:

We basically built everything around a new physics engine, so everything feels super fun to play with. Nothing is on a linear animation, nothing is timed. Everything is just based on the way that you move.

So what's important about this? People in interface design circles have recently been talking a lot about the Facebook Home animations and interactions. The way they use Quartz Composer […] Go Big by Going Home by Julie Zhuo on Medium is particularly intriguing. Right now however I'd like to focus on implementation, particularly how requiring realism might lead you to replace timing with a physics engine.

Normally when you animate you're doing a transition between two states. For example, we might transition an object from the left of the screen to the right of the screen over two seconds. We could […] in an imaginary programming language that looks like Ruby and has APIs like Cocoa and jQuery write it like this:

circle.left = 0%
animate duration: 2s {
  circle.left = 100% 
}

Now let's try something more dynamic, instead of always moving from the left to the right, we'll make it so the circle moves to wherever you click. […] For demonstration purposes this is quite slow, in a real interface you want movement to feel snappy.

on 'click' {
  animate duration: 2s {
    circle.left = mouse.left 
  }
}

Have you noticed something? Try clicking very close to the circle. Then try clicking very far away from the circle.

When the circle has a short distance to travel it will go slowly, but when it has a long distance to travel it will go quickly.

Because we have said that this transition must always take two seconds the circle completely ignores distance. Instead it will traverse any distance you give it in a perfectly fixed time. As you well know, this isn't how going places works in the real world.

Fixed transition timings work very well when we know the distance an object has to cover. We can make it look realistic by tweaking the timing. But when the objects are being manipulated by people (such that they could be in diverse states) a fixed transition time is not very useful.

The way to solve this, as mentioned by Joey Flynn, is to use some sort of physics engine. So, instead of giving our animation a fixed time we could write it so that the circle moves at a fixed rate, but always has a goal in mind (where you clicked). This way it will move more like a real object.

on 'click' {
  while circle.left != mouse.left {
    if mouse.left > circle.left {
      circle.left += 0.5%
    } else {
      circle.left -= 0.5%
    }

    wait 0.01s
  }
}

You’ll see that the object feels more real this way. It moves at the same speed over short and long distances. There are many more aspects to making movement feel real. For example, in this case there doesn't seem to be any reason for the circle to stop. It is moving, then suddenly it is not moving any more. Taking cues from the real world we could give the circle brakes, so it would decellerate as it approaches. Or alternatively it could act elastically, like it is attached by string to the end point.

To achieve realistic animations in our User Interfaces we need to stop thinking about animations in terms of a duration and a transition function. Instead we should imitate reality with what we've learned from reality.

If you'd like more content like this, you can join my mailing list.

Have any comments, recommendations or criticisms? Tweet or email me.