Paper

Notice the ‘hamburger’ menu flipping into an X, with the most subtle bouncing effect. I love the slight delay on the sliding animation as my pages and groups come into view.

Just about every popup or menu in Paper can be closed by pulling up or down when there’s no more room to scroll. You can see this implemented on the publicity setting here when composing a new post.

Just about every heading or title in Paper has this beautiful shine effect to it, which reminds me of iOS’s ‘Slide to Unlock’ text. Turns out that this shine doubles as a loading indicator.

Watch this one a few times and pay attention to everything going on. When you pull down, the background slides down just a tad, the arrow at the top of the message bubble stretches and ‘pops’, and everything bounces lightly back into place. Amazing.

I noticed that as you’re opening a card to view a webpage, Paper starts to load things in before you’ve fully expanded the card. This beautiful little bit helps keep browsing fluid and fast.

Again, pay attention to the light bounces in different parts of this view as you flip a web page closed. Did you see that little sheen of light go across the top of the card as it closes? Stunning.

This one was highlighted in Paper’s debut demo video, and has certainly gathered a lot of attention. I love the small scroll bar that shows your current position on the photo. Someone has already replicated this effect with HTML/CSS/JS – here’s the tutorial.

No animation in Paper is jerky or unrefined. When I start to type out a search, notice the subtle fading in and out of the various elements on the page?

Pay attention to the typographic changes on web cards, as Paper changes its own style to reflect those of the origin website.

Yep, you can even swipe left/right to close a news story, with the card folding neatly and bouncing back into place.

Chat Heads aren’t new to the Facebook ecosystem on iOS, but it’s still a delightful little interaction to see the person (or page’s) avatar slide into view with a familiar bounce.

If you’re composing a post, you can pull down once to reveal the ‘Delete’ button. If you start pulling down again, we get this beautiful interaction that allows you to delete the draft by completing the ring.

I was surprised that you had to pull down twice to activate this interaction, rather than having it be one longer-pull. Perhaps in user-testing the designers found that it was too easy to accidentally delete a draft with one pull.

I still haven’t figured out the utility of this detail, but swiping left/right when viewing a page or profile lets you navigate back in time through the timeline of updates.

We’re used to seeing this interaction on the main Facebook app, but it still remains fun to play with. Flinging pictures around the page toggles them open/closed. I love how easy, and fun, Paper makes it to interact with photos.

This is one design detail in Paper that had me scratching my head. Which one is off? Which one is on? iOS toggles are turned ‘On’ when moved to the right, but for some reason this doesn’t feel obvious on Paper.

I love everything about this view. When adding or removing a photo from the composer, we are met with all sorts of subtle bouncing animations, paired with the text resizing/relocating.

Tap + hold on the large photo that covers the top-half of the screen to open the customize view. I love how the cards slide around, just ready to be moved, rearranged, added and deleted.

Pull the search results side-to-side to see a beautiful rubber-banding of the list items.

Click on the “more likes” box on a popular post to see people’s names fly out into a long list.

This one is super slick. Watch the category title fade out as it gets closer to the icons in the upper right corner. And then right as the category title hits the right side of the screen, it fades smoothly back in.

I love the way that the cards slowly peek out from behind the front card. Even the status bar fades in and out of view, another small but beautifully executed detail.

Tapping the ‘like’ button on a post results in a colorful explosion of blue fireworks, coupled with the signature Paper bouncing effect. I love this one!

It’s still amazing to me to see how fluid the transitions are when toggling between different tooltips. Watching the icons in the bottom bar bounce and wiggle as they’re selected/deselected provides subtle context about which view the user is currently seeing.

As you expand the card views across Paper, it’s worth noting the way the background slowly scales back and fades into the distance. This interaction builds the user’s sense of location within the app and provides depth among the views. Beautiful!