Facebook today open sourced its highly-anticipated animation framework called Pop that powers the animations in the Paper for iOS app.

Pop’s methods for defining animations resemble Apple’s Core Animation API, so it should be quite easy to pick up if you’ve worked with CoreAnimation before. Even if you haven’t, writing a basic animation with Pop is quite easy.

Here’s a simple animation to move a view from one point to another with a spring effect:

POPSpringAnimation has a few more properties to define the behavior of the spring, including springBounciness and springSpeed. Changing its values to this:

springAnimation.springBounciness = 20; springAnimation.springSpeed = 20;

Makes the animation look like this:

The property you want to animate is represented by a POPAnimatableProperty. The property can expectedly be on your view or layer, but Pop actually lets you animate any property on an NSObject (for example constraints). There are a bunch of convenient constants to help create a POPAnimatableProperty using the propertyWithName: initalizer:

kPOPViewAlpha; kPOPViewBackgroundColor; kPOPViewBounds; kPOPViewCenter; kPOPViewFrame; kPOPViewScaleX; kPOPViewScaleXY; kPOPViewScaleY; kPOPViewSize;

You can get callbacks on start, end, etc. by implementing the POPAnimationDelegate protocol and assigned your class’ object as POPAnimation delegate.

- (void)pop_animationDidStart:(POPAnimation *)anim; - (void)pop_animationDidReachToValue:(POPAnimation *)anim; - (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;

If you’ve worked with top level UIView block animation APIs, pop will take some time getting used to, especially for finding UIView equivalent properties. I found out that POPSpringAnimation doesn’t have a duration property, instead (I assume) its timing is controlled by its velocity and spring properties. And if you’re hunting for the equivalent of delay, it’s beginTime (which mirrors Core Animation APIs).

There’s still a lot to explore in Pop, and I’m particularly fascinated by its ability to animate arbitrary properties of any object. I’ll try to explore this angle further.

Liked the post? Follow me on Twitter @r0unak and try Design Shots, our Dribbble app.