Things to know about trying to animate things on mobile/slower devices

mobile-animation-gotchas.md

Mobile DOM Animation Gotchas

Things learned the hard way

General Techniques

• Enable 3D acceleration on mobile webkit devices http://davidwalsh.name/translate3d
• Add webkit-backface-visibility: none to any child elements of an accelerated parent that appear to flicker during animations
• Use transforms (translate, scale) in place of normal CSS properties where possible
• Avoid large repaints as much as possible (e.g. showing and hiding large areas of content)

Gotchas

• It appears that triggering hardware acceleration on the child of an already-accelerated parent, or on an overlapping element, destroys performance in webkit. (Also observed here: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/)
• Hover states on nearby items can cause lag on your animating item. In one situation, for whatever reason due perhaps to event delegation and bubbling, nearby elements with hover states were causing large overlapping areas to repaint when a user interacted with the animating element, rather than just the area of the animation, and performance suffered greatly. Chrome Dev Tools' 'show repaints' option was really useful for diagnosing this.
• Nearby animated gifs will also cause a continual repaint, and may affect performance of the animating element.

Other Observations

• Animations on mobile are still really sucky, getting good performance on particular situation is an exception. Elements that use transform: translate[...] are good candidates for animation on mobile.
• The larger area affected, the larger the repaint, the worse the performance.
• Animating text (especially custom fonts) seems to be particularly ill-performing.
• Trying to animate multiple layers at the same time also performs poorly. It's best to try to only animate one element at a time.