Native Page Transitions with PhoneGap

I was too busy to write any blog posts last week, but this more than makes up for it…

Stop the press!

Having spent copious amounts of time emulating native iOS page transitions with JavaScript, HTML5 and CSS3 in the past, everything is about to change.

My new Cordova / PhoneGap plugin allows you to use the real native iOS transitions without ever leaving your web view!

I’ve turned page transitions around (poor pun, I know).

Page transition

Video demo

This is so good, for the first time on my blog, it demands a video demo. Yes, that really is a Cordova web view with a single HTML page.

Down to business

If you’re a Cordova / PhoneGap developer, I’m sure you’re already desperate to get started, so I’ll cut to the chase.

Install

The source code is available on Github.

Assuming you’re using Cordova 3.x and the CLI, installation is as simple as using the cordova plugin add command:

1
cordova plugin add https://github.com/leecrossley/cordova-plugin-native-transitions.git

You do not need to reference any JavaScript, the Cordova plugin architecture will add a nativetransitions object to your root automatically when you build.

Transitions

Flip

Flip page transition, with support for flipping left or right:

1
2
3
var duration = 0.5, // animation time in seconds
direction = "right"; // animation direction - left || right
nativetransitions.flip(duration, direction, onComplete);

Curl

Curl page transition, with support for flipping curling up or down:

1
2
3
var duration = 0.5, // animation time in seconds
direction = "down"; // animation direction - up || down
nativetransitions.curl(duration, direction, onComplete);

Fade

A simple fade page transition:

1
2
var duration = 0.5; // animation time in seconds
nativetransitions.fade(duration, onComplete);

Example

Here’s an example of how I suggest you use the plugin in your code, so that you get a realistic transition:

1
2
3
4
setTimeout(function() {
// Change your html here
}, 50);
nativetransitions.flip(duration, direction);

More transitions?

If you’d like to add more transitions (possibly custom transitions of your own) please pull request. If you’d like something in particular, let me know and I’ll see if I can implement it for you.

This is pretty flippin’ amazing stuff (OK, I’ll stop now).