Tag Archives: mobile

Why we (mobile website designers) need to learn CSS animation.

I got a comment on an earlier post about making animation look better on mobile, and there seemed to be some confusion about using javascript animation versus css animation, when targeting mobile browsers. I wrote back and explained my thoughts, but I thought it might make for a good post too. So here goes…

It is absolutely vital for mobile developers to learn CSS animation instead of javascript.

The reason is that Javascript is actually very inefficient for animation, and it’s only recently, with the proliferation of mobile browsers, that we are starting to notice this. If we had been trying to do javascript animation on the computers we had back in the late nineties (which were of similar power to our current mobile phones), we’d have seen it then.

You see, with a JS animation (e.g. created using jQuery’s animate function), the javascript library sets an interval timer (lets say, 33ms, which is about 30 frames per second), and on that interval, it figures out where the animated element should be, using some pretty complex math calculated by the CPU, and then puts it there. Unfortunately, if the CPU is too slow to do that calculation every interval, it gets backed up and the animation stutters. jQuery and other JS animation tools do some work to combat this, sensing a drop in frame rate and trying to make the interval wider, to give it more time to complete the calculations, but it’s often too-little-too-late.

On the other hand, when you do a CSS animation (e.g. using the transform or webkit-transform css properties), you leave it to the GPU to simply calculate where the element should be as often as it can. As soon as it calculates the element’s new position and places it there, the GPU starts the calculation again. This means the animation is always as smooth as the GPU can possibly make it, no matter what. If you animate too many elements for the GPU to handle it may still have trouble, but instead of ugly stuttering, it will be a more graceful drop in framerate.

That’s why CSS animation is a must for mobile targeted websites. The good news is that all mobile browsers (the ones we care about anyway) support CSS3’s animation techniques, so there’s no need for capability detection and fallbacks.

UPDATE: Fix: CSS Animation slow or choppy in mobile browsers

EDIT again: DONT DO THIS. It breaks z-index rules sometimes on modern webkit based browsers.

Original post: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/

Even better than just adding this code to all the elements you want sped up…

-webkit-transform: translateZ(0);

Use -webkit-transform: translate3d() to do all your animations, instead of left, right, top, bottom, margin, or padding properties.

-webkit-transform: translate3d(50%, 0, 0);

Note that the values in the translate3d parentheses are x, y, z coordinates. Since -webkit-transform uses (yet another*) coordinate system, leaving a value as 0 will leave it unchanged (unless you used -webkit-transform somewhere else already).

Basically, the first example tells the browser to use the GPU to animate the element, which helps a fair bit, but the second code snippet uses the new CSS3 transform algorithms, which are WAY more efficient. The beautiful thing about it is all the modern smart phones use webkit, and therefore support -webkit-transform. My iPhone app now scrolls “like butter“!

*“Yet another” meaning you can move things relative to their point of origin with left/top, margin-left/margin-top, and now -webkit-transform;

Fix: CSS Animation slow or choppy in mobile browsers

EDIT: DONT DO THIS. It breaks z-index rules sometimes on modern webkit based browsers.

I’m developing an iPhone app using the PhoneGap library, which lets you write your app as if it were a website. That means any UI transitions or animations have to be written the way you would for any modern website targeting Webkit: CSS3 transitions (mobile javascript is too slow for frame by frame calculations).

Unfortunately, CSS transitions can be a little slow, a little choppy, even on iPhone 4 and the faster Android based phones. The problem is that, by default, webkit doesn’t involve the GPU unless you’re doing 3D transforms. With desktop horsepower, thats fine. On a mobile device, that GPU could really help.

So how do you force webkit to share the processing load with the GPU?

Apply this style to the element you’re animating:

-webkit-transform: translateZ(0);

Simple, but effective.