Arek Holko

Motion Blur

Motion blur is the artefact by which fast-moving objects appear blurred. It's been present in movies, photographs and video games for many years now. I haven't seen it used in any real-world user interfaces yet, though some designers have utilized it in prototypes, for example YW_Z in his Pocket animation:

Read more →

Hamburger Button Animation

Last week I wrote about Google's Authentic Motion. The post was kind of dry, though, so I decided to use the derived timing function to implement one of Android's new animations. A hamburger button transition seems to be fitting iOS design language1 and that's what I've chosen to recreate. It may become a good alternative to another recently introduced transition.

Read more →

Bringing Google's Authentic Motion to iOS via Bézier Curve Fitting

During this year's I/O conference Google showed that it cares about the design. While browsing through its website, I noticed an interesting approach to animations called Authentic Motion. Google's designers created a new animation curve called Swift Out and described it as:

Motion with swift acceleration and gentle deceleration feels natural and delightful.

Read more →

UIScrollView's Inertia, Bouncing and Rubber-Banding with UIKit Dynamics

Two months ago Ole Begemann wrote a great article about rebuilding UIScrollView from scratch: Understanding UIScrollView. A couple of days later Rounak Jain and Grant Paul added inertial scrolling, bouncing and rubber-banding to it using Facebook's Pop framework. Since then, I've wanted to recreate the same effect with UIKit Dynamics and have finally done that this week.

Read more →

Action Sheet Follow-Up

I received a useful feedback (thanks Peter and Krzysztof!) to my last article and decided to try to generalize that animation into a reusable component. Previously, the code was highly coupled between the view and view controller, so it would be hard to use in different scenarios. I moved the logic to UIView subclass named BendableView, which is going be responsible for bending its edges during animations affecting its position.

Read more →