How to Create a Custom Transition Page Effect for iOS: Part 1

Every now and then, one of our Denver app developers comes up with a great programming solution that we’d like to share with the rest of the world. In this two-part tutorial, Pavel will show you how to create a custom transition page effect for iOS that utilizes proactive caching to increase the efficiency and speed of the effect. Feel free to ask questions or add your own two cents in the comments below.


Since Apple’s iOS 5.0 release, we are able to use a capable UIPageViewController to manage app content, like pages in book. It is often necessary to prepare the content of the page before it will be displayed. Suppose the content of our views can be loaded with a certain delay, something like web pages. In this case, going to the next page, the user will have to wait until the content is loaded. So why not create a page in the background and load its content while the user reads the current page?

In this blog article we will see how to create a data source for UIPageViewController with proactive caching. Furthermore, we will be able to create our own page navigation controller with custom page transition effects.

So let’s get started.

The idea is to have a component with two independent parts:

  • PageCache — A storage that can create/cache the pages and can be used as a data source for the UI Page View Controller.

  • PageSwitcher — A controller with the ability to manage pages and show transitions while navigating between them, which can use PageCache as well.

iOs Transition effect

Typically, each page displays only part of the total content. The component could tell the index of the next part of the page so that it could prepare to display the desired portion of the content.

Page Caching

So if we want to use the view controller as a page, it should meet these requirements:

  • It should have a property logical Index

  • It should define a method prepare to show at logical index. (This method will be called by the component before the page will be displayed)

Let’s create a protocol that view controllers can adopt:

How to create transition effect for iOSAnd then PageCache class itself:

How to create transition effect for iOSThere are some key points we should pay attention to here. The first is related to how the pages are instantiated. When PageCache is initialized the class of the page is taken into account. Then, the class is checked for being a UIViewController subclass and for cacheable page protocol conforming.

 How to create transitionHow to create transitions for iOSHow to create transitions for iOSAnother point is in accessing the view of the newly created page to actually load the view hierarchy.

Custom Transition Effect iOS5The rest of the implementation is in creating pages and pushing/popping them into the cache.

Now let’s try to use PageCache with a custom view controller. In the demo project it’s the class WebViewController, which contains a web view and a title:

How to create a custom transition effect for iOS5

This ends part 1 of this tutorial. To read part 2, click here.