Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Facebook Pop
Search
Ryan Nystrom
July 01, 2014
Programming
2
640
Facebook Pop
A monthly Ray Wenderlich tech talk about Facebook Pop
Ryan Nystrom
July 01, 2014
Tweet
Share
More Decks by Ryan Nystrom
See All by Ryan Nystrom
Animation & Interaction Design
rnystrom
2
200
Facebook & Mobile
rnystrom
0
73
Drawing with Code
rnystrom
1
220
Open Source for the Open Mind
rnystrom
2
190
Mobile Debugging
rnystrom
0
97
Migrating to iOS 7
rnystrom
1
220
Minimal-first Design & Development
rnystrom
1
140
Learning iOS: Part 1
rnystrom
3
80
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
97
34k
VS Code Update for GitHub Copilot
74th
2
670
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
770
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
370
PicoRuby on Rails
makicamel
2
140
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
型で語るカタ
irof
0
530
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Gamification - CAS2011
davidbonilla
81
5.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Cult of Friendly URLs
andyhume
79
6.5k
Become a Pro
speakerdeck
PRO
29
5.4k
Transcript
Facebook Pop — @_ryannystrom
What is Pop? —Born from Facebook Paper —Library similar to
Core Animation —Delightful timing functions —Works on the model layer —NSObject & custom properties
Paper
Paper
Paper
Springs pre-iOS 7 [UIView animateWithDuration:0.2 animations:^{ view.frame = wayPastFrame; }
completion:^(BOOL finished) { [UIView animateWithDuration:0.2 animations:^{ view.frame = backABitFrame; } completion:^(BOOL finished) { [UIView animateWithDuration:0.2 animations:^{ view.frame = finalFrame; }]; }]; }];
Springs iOS 7 [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.5 // 0.0-1.0 initialSpringVelocity:0.5
// 0.0-1.0 options:kNilOptions animations:^{ view.frame = frame; } completion:nil];
Springs with Pop POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame]; spring.toValue =
[NSValue valueWithCGRect:frame]; spring.springBounciness = 15; spring.springSpeed = 20; [view pop_addAnimation:spring forKey:@"spring"];
Animate Autolayout with Pop POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame]; spring.springBounciness
= 20; spring.springSpeed = 15; POPAnimatableProperty *property = [POPAnimatableProperty propertyWithName:@"propName" initializer:^(POPMutableAnimatableProperty *prop) { prop.readBlock = ^(NSLayoutConstraint *constraint, CGFloat values[]) { values[0] = constraint.constant; }; prop.writeBlock = ^(NSLayoutConstraint *constraint, const CGFloat values[]) { constraint.constant = values[0]; }; prop.threshold = 0.01; // "completeness" threshold }]; spring.property = property; spring.toValue = @(newWidth); [self.containerHeightConstraint pop_addAnimation:spring forKey:@"spring"];
Demo
Links https://github.com/schneiderandre/popping https://github.com/Ciechan/BCMeshTransformView http://codeplease.io/playing-with-pop-iv/ https://github.com/facebook/pop https://www.facebook.com/paper https://code.facebook.com/posts/234067533455773/introducing-pop-the-animation-engine-behind-paper/ http://blog.brianlovin.com/design-details-paper-by-facebook