So, I was on Apple’s home page the other day and noticed some jank in their main carousel animation. It wasn’t anything huge, but the animation seemed to stagger a bit as the transitions were beginning and ending. There are five transitions that occur to display different Apple products. You can see this in the Frame analysis below. Each green line shooting to 0 FPS is a paint within chrome.
Digging deeper, we can see that a large amount of time is being taken for the hardware compositing. This is where we force elements to be accelerated and
handled by the GPU with translate3D(0,0,0) or translateZ(0) (aka null transform hack).
The problem with Apple’s site and the reason why paints are spiking before each animation is because too many layers (or divs) have the null transform applied.
I wrote about this a while ago, but the basic point is that too much of a good thing is often a bad thing. In this case, too many elements have translateZ(0) applied when only one or two applications are really needed. This is forcing a longer composite time and ultimately giving the animations some jank.
The fix is easy. Start with the top level container for the animation and see which of the child elements have a null transform and figure out if they really need it. If we turn on “Continuous Page Repainting” in dev tools, we can see how the page is being painted and how many composited layers we have.
By viewing the source and running through each element of the carousel animation, we can see that the parent already has the proper layer compositing. From there, I just disabled all the null transform hacks that were applied to nested elements.
The yellow bars are the 7 second timer before each transition occurs, so this is expected.
The animation on Apple.com isn’t terrible as it stands in its current state, but as I stated at the beginning of this article, it’s fun to fix jank :)