How to Make Animations with Facebook POP

in 5 Steps

Published in

swiftist

3 min readJul 19, 2014

“pop” is the power behind the animations on Facebook’s Paper app. Thanks to Facebook, they open sourced the “pop” library, so everyone can make awesome animations easily. Lets start making cool animations with this 5 simple steps.

Step 1: Install

To install pop with CocoaPods, just add this line to your Podfile:

pod 'pop', '~> 1.0'

Or if you want to add manually follow the instruction from pop github repo:

Alternatively, you can add the project to your workspace and adopt the provided configuration files or manually copy the files under the pop subdirectory into your project. If installing manually, ensure the C++ standard library is also linked by including -lc++ to your project linker flags.

Here you can find the Facebook Pop library: https://github.com/facebook/pop

If you don’t know how to use CocoaPods, check this quick tutorial:

How to use CocoaPods

Step 2: Add Pop to your project

Add the header to your project:

#import <POP/POP.h>

Step 3: Create an animation

You can create 4 different kind of animation with Pop : spring, decay, basic and custom.

Spring animations can be used to give objects a delightful bounce.

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

Decay animations can be used to gradually slow an object to a halt.

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];

Basic animations can be used to interpolate values over a specified time period.

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];

CustomAnimation makes creating custom animations and transitions easier by handling CADisplayLink and associated time-step management.

I will not cover Custom Animation for this quick tutorial. Check the repo for some advanced stuff https://github.com/facebook/pop

Step 4: Add properties to animation

Pop lets us set properties to animations like:

velocity : anim.velocity = @(1000.);

fromValue: anim.fromValue = @(0.0);

toValue: anim.toValue = @(1.0);

bounciness: anim.springBounciness = 10;

Step 5 : Animate

To start an animation, just add the object you create in Step 3 to the view you want to animate.

[self.yourView.layer pop_addAnimation:anim forKey:@"typeANameForYourAnimationHere"];

Now that is all. It is very simple to create animations with Pop. Check the examples to totally understand how to make an animation. And use them in your project to be a pro.

# example animations

This animation scales button to half.

POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.5, 0.5)]; scaleAnimation.springBounciness = 10.f; [self.button.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnim"];

This animation rotates a button.

POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];rotationAnimation.beginTime = CACurrentMediaTime() + 0.2;rotationAnimation.toValue = @(1.2); rotationAnimation.springBounciness = 10.f; rotationAnimation.springSpeed = 3; [button.layer pop_addAnimation:rotationAnimation forKey:@”rotationAnim”];

This one change the opacity:

POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];opacityAnimation.toValue = @(0.5);[animView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];