iPhone and iPad smooth animation

Everyone knows how popular mobile browsers have become. On modern devices, the web is less and less inferior to the desktop original. However, there is one stumbling block: speed. Although at the output we get a beautifully rendered web page, rendering performance and JavaScript leaves much to be desired.

Especially it is noticeable on all sorts of slideshows: on mobile and tablets they brake, buggy, flicker and in every way spoil the impression. Today, we'll make the animation work perfectly on the iPhone and iPad.

To understand what is at issue, it is enough to open in Mobile Safari any page with animation, at least the home page of the popular gallery jquery.cycle. On the desktop everything is smooth and wonderful, and on the iPhone the braking gloom. On real sliders with large photos the situation is even worse.

One would think that a small device can not squeeze more, but it is not like this. Some interfaces, in particular, the Sencha framework and iPad-magazines can somehow manage this. How do they do it? Hardware acceleration rushes to the rescue!

There are wonderful CSS3 properties: transform and transition. The first one controls the transformation of the element, the second controls the CSS animation. In particular, using the transform property, you can move an element along the X or Y axis, and with the transition, you can animate this shift. The difference from the margin-left / margin-top and left / top properties is that not the element will be moved, but its "graphical display" on the page. This way you can avoid recalculating the page layout for each shift, and also reduce the use of JavaScript.

Let’s start

The examples below work in Chrome, Safari, on the iPhone and iPad.

The value we need is called translate3d. And it so happened that only this value really affects something: at least on the firmware 4.1 the use of simple translate did not bring success. So, if we were using jQuery in the usual way, we called the animate method:

	$('#slide').click(function() {
		$(this).stop().animate({'margin-left': 650}, 1000);
	});
			

Click to start the animation:

Animating on margin-left / left

Now you just need to set the necessary property in CSS, set the time and type of animation:

	$('#slide').click(function() {
		$(this).css({
			'-webkit-transform': 'translate3d(650px, 0px, 0px)',
			'-webkit-transition': '-webkit-transform 1s linear'
		});
	});
			

Animating on translate3d

ВEverything else will be done by the browser itself. This method is not new, but all the jitters and jams on the iPhone magically disappear. There was a little wink at the start of the animation, but it's fixable. You just need to explicitly specify these properties in CSS with the initial values of transform:

	#slide {
		-webkit-transform: translate3d(0px, 0px, 0px);
		-webkit-transition: -webkit-transform 1s linear;
	}
			

Animating on translate3d with CSS preset

You should also not overuse these properties and expose them to all possible elements, especially the pictures. Mobile Safari can just terminate. And so, using this simple method, you can achieve the ideal work of your site on mobile devices that support hardware acceleration.

Toolkit

The technique described in the article is used in practice in the Twilight slideshow and jBond scroller.

The jQuery Enhanced Animate plugin allows you to convert animation of some properties to webkit animation on the fly.