The top animated gif shows the innovative Timeline UI for the Pebble Time, another Kickstarter blowout that has almost reached $9M in backing. The bottom gif shows Apple’s take on a smartwatch UI in their upcoming Apple Watch.
Look closely at those two animations and you’ll notice the level of detail that Pebble and Apple have put into how each individual subview animates between positions. It’s no longer enough to animate an entire screen to its new position. That’s boring! We’re now seeing individual hands on clocks and each number and letter animate in an interesting way.
More specifically, in the Pebble Time’s Timeline UI, we can see:
The initial round clock and hour/minute hands animate away in a clockwise rotation into a circle that bubbles away.
The hex clock animate up, then the clock’s hands, then the 10 min label underneath it. The right-side icons in the list squish away upwards instead of simply moving upwards. On the Apple Watch:
The green Running button shrinks a little before animating downwards and fading away. The 6.5 first showing the 6 animating upwards into place, then the . dot, then the 5. The number label in the 3,2,1 countdown shrinking/bouncing-small a bit and the next number growing into its normal size. All these little touches make the UI feel much more alive and organic, which seems to make a lot of sense for a device that is worn all day directly on the body. Playing with both these watches is going to be a blast!