Introduction to Facebook Pop

For many years now, animation has been a hard thing to do on not just mobile devices, but pretty much devices of any kind. Several factors contributed to the lack of animation, chief amongst them, the fact that UI/UX paradigms weren't fully realized and correctly applied in the right contexts. Hardware wasn't powerful enough to drive complex animations either, so even though there were several interesting concepts demonstrated, they stayed a pipe dream.

Recently though, if eight years ago can be called recently, personal devices, even more personal than the personal computer, began becoming mainstream. Concurrently, technological advancement enabled more complex and responsive UX, making the need for animations and contextual transition even more apparent. Super efficient, easy-to-use animation and graphics frameworks started popping up all over the place. Well known ones included Core Graphics and Core Animation on Mac OS, which later got ported to iOS.

As technology proceeded to mature, other companies realized that graphics and animation would make or break the user experience, and so began building their own frameworks. The most well known of these is Facebook's Pop animation framework, which first made an appearance in Facebook's much lauded Facebook client called Paper and later made its way to Facebook's other experimental apps, such as Rooms and Shots. Pop made a notable splash in the third party frameworks space mostly due to its ease of use, stability, and integration of real world physics into animations. All this results in delightful animations that are incredibly smooth and responsive. This framework is what we're going to explore today.

So, let's get started.

Pop resides on Facebook's GitHub repository, which contains a lot of other open source projects that Facebook works on. You can find the link here.

The most notable thing about Pop is that it works somewhat similarly to Core Animation. You build animations, set properties, and execute them. You can also change animations midway, remove them, and add more animation properties to an existing animation. There are several built in types of animation native to Pop. These include standard static animations, decay animations, and spring animations. Mixing and matching all these things is also possible, which makes for some really interesting and fantastic animations.

The first step you'll want to do is to clone the Pop repository. You can use command line Git, or just use your favorite Git client. My favorite is Sourcetree.

After that, create a new Xcode project, and add Pop to it. You can add the entire source of Pop, or add it as an embedded framework, your choice.

After that, import Pop.

//added as source #import <pop/Pop.h> //added as embedded framework @import pop;

Here is where you can start appreciating the pure simplicity of Pop. To build a basic, reactive spring animation, all you have to do is this:

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame]; anim.toValue = [NSValue valueWithCGRect:CGRectMake(self.window.frame.size.width/2, self.window.frame.size.height/2, 50, 50)]; [self.view pop_addAnimation:anim @"frameTranslate"];

Three lines! That's it! Well what did those three lines do though, you may ask? Basically, we created a new spring animation called anim, set a toValue, which is what you want to animate the view or layer to, and then added it to the view or layer, in this case view. As soon as the animation is added, it'll trigger. You don't have to do any sort of call to start animation. To change the animation, just re-set the toValue to whatever you want the new values to be. Just remember that you must add it to your original view using the original key you set, in this case, frameTranslate.

Pop comes with the ability to animate many properties, including color, frame, text change, etcetera. You can also build your own custom animations with Pop, but we won't get into that for this post. For now, play around with Pop, and enjoy!