For me, the best way to find inspiration in my development is to download indie apps and play with them.

I’m probably at some point going to write about Bear (free, $15/year for Pro), a great new notes app by Shiny Frog. It’s pixel perfect, a joy to use, and super speedy.

My favorite UI element in Bear is the transition between the views. There is a parallax effect moving between the notes list, editor, and tags. It allows for sloppy scrolling and the animations are perfectly timed.

How the hell did they do this? Did they use the stock SplitViewController? Luckily, a curious dev asked about it on the Bear subreddit.

In order to save this for posterity, here’s Shiny Frog’s full answer:

No, Bear does not use a Split View. We thought about using it but the first tests were not good enough in terms of interaction (having 3 panes and not only 2 and needing a 4th one for the Information pane).

What we wanted was something pannable in the middle of the views by default so a Scroll View seemed to be the right choice. The only problem remained the fact that the views have different widths so the normal pagination of the Scroll View would not work. Let’s also add the fact that we wanted to add some parallax to the views while scrolling…

The base of Bear is a custom Scroll View with all the inner views arranged using Auto Layout (in order to have the proper sizing for compact/regular sizes [the different proportions for iPhone/iPad]). That custom Scroll View applies the parallax (modifying the constants of the Auto Layout Constraints), keeps track of the real origins of the inner views (let’s remember the parallax effect that moves the views) and snaps to the right position depending on the direction of the scroll and other factors, consulting a delegate (for example if it can scroll past the Notes List and show the Notes Editor [it is not possible on iPhone if there is no note selected and that is something that the delegates knows about]). Also some views are scrollable to only when starting to drag from the edge of the phone (the Information Pane) and this is also handled by the custom Scroll View.

For the real origins of the views: actually it keeps track of the left and the right snapping points of the views and snaps to the "nearest" one (in order not to force the next snapped view to have its origin on the right border).

Another thing that it does is to cancel the scroll if it is smaller than a delta (else it would scroll to the next view even if moved by 2px).

A last thing: the parallax is handled with coefficients between the views (first/second, second/third and so on); that's why we are able to show the Information pane with the Note Editor "remaining in place": the parallax coefficient is set to 1.0 and the Note Editor moves with the proportion 1:1 in the opposite direction (and it is everything achieved with Auto Layout by changing the constants between the views) 🙂

We would love to make the view generic (currently it is in the adjusted-too-much state) and to release a blog post on how to re-create it but it would take time from the development of Bear. Currently it is hardly possible due to all the new features we would like to add, but maybe we will find some time in the future.

Thank you for the interest, I hope this has answered to your questions 🤓

A Foray into macOS Development

I’ve been fooling with Cocoa development. I’m making the Blog Processor a toy application for internal use, and I have an idea for a consumer app in the works. So far, it’s been a lot of fun. I’ve been told there’s a little more money in Mac utilities than in iOS apps, so might as well give it a shot.

Other Stuff

I’m continuing to study:

• Core Animation
• Reactive Extensions