Warning: Trying to access array offset on value of type null in /home/l7yod4xq2ufo/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16
Warning: Trying to access array offset on value of type null in /home/l7yod4xq2ufo/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17
Last Updated on January 5, 2016
I am blockquote-ing everything that is referenced, since I’ve borrowed some information from MDN and Google articles that are already worded perfectly.
Basic rules are:
- Stick to ONLY transform and opacity changes for your animations.
- Promote moving elements (or
position:fixedelements) with will-change or translateZ. - Avoid overusing promotion rules; layers require memory and management.
There are two key factors in this area that affect page performance: the number of compositor layers that need to be managed, and the properties that you use for animations.
The best-performing version of the pixel pipeline avoids both layout and paint, and only requires compositing changes. In order to achieve this you will need to stick to changing properties that can be handled by the compositor alone. Today there are only two properties for which that is true: transforms and opacity:
The caveat for the use of transforms and opacity is that the element on which you change these properties should be on its own compositor layer. In order to make a layer you must promote the element. Google Developers
To promote an element onto it’s own layer, including elements that ‘stand still’ with position fixed – use the following:
.moving-element {
will-change: transform;
}The will-change CSS property provides a way to hint browsers about the kind of changes to be expected on an element, so that the browser can setup appropriate optimizations ahead of time before the element is actually changed. Mozilla MDN
Given that we are allowed to animate opacity with no performance hit, I’m not sure why it’s included, but here are some values you can apply will-change: to:
will-change: transform;
will-change: opacity;
will-change: left, top;For older browsers, or those that don’t support will-change:
.moving-element {
transform: translateZ(0);
}The translateZ(); CSS function moves the element along the z-axis of the 3D space as demonstrated in the pen below.
See the Pen KVWmGG by Peter (@peterdillon) on CodePen.0
Be cautious: Do not promote too many elements because it uses browser memory space and for devices with smaller allocation, it can have a negative impact on performance.
JS and Layout Engine Concurrent Race Condition
Just a note about JavaScript and browser layout engines:
var img = new Image();
img.src = "http://foo.com/pic.gif";
document.body.appendChild(img);
while(img.naturalHeight == 0) {
// loops forever with a single threaded semantic
}This loops because the layout engine has not yet calculated the height (or any other attributes) of the the image.