Some Do’s

Only use properties that are cheap for browsers to animate. Those are, more or less: translate3d, scale, rotation and opacity. Anything else and you’re probably not going to be running at 60fps.

$(animation.selector)

.css({ 'transform': 'translate3d(' + translateX +'px, ' + translateY + 'px, 0) scale('+ scale +')',

'opacity' : opacity

})

Use window.requestAnimationFrame when firing the animations in JS. This basically tells the browser animate stuff before the next repaint. Do this instead of just directly adjusting properties.

window.requestAnimationFrame(animateElements);

Round values appropriately. If you’re animating some object 100px over the course of 200px worth of scroll (so an object at 50% normal speed), don’t let it get pixel values like 54.2356345234578px. Round that to nearest pixel. Trying to do opacity? Two decimal places will likely do.

animationValue = +animationValue.toFixed(2)

Only animate elements in viewport. Continuing to pass thousands of values during scroll to elements off-screen makes no sense and can be expensive.

Any code example I tried for this felt super contrived. Probably best to check out the living demo code to understand one way to do this.

Animate only absolutely and fixed position elements. I’m not 100% why, but I’ve seen significant performance pickup with only animating absolute/fixed elements. As soon as I apply a single animation to a relative/static element, the fps suffer.

.parallaxing-element {

position: fixed;

}

Use natural <body> scroll. Some browsers, specifically Safari I’ve noticed, really take a performance hit on scrolling elements other than the body. Honestly, I can’t think of a good reason to do it. Even in cases when everything on the page is positioned fixed, so there’s no actual scroll height, just use JS to set an appropriate body height to get the height of scroll you need for all your parallaxing goodness.

Define all your animations in an object, not as messy spaghetti madness. This has almost nothing to do with performance, but it just makes everything so much easier. Plus, c’mon, you’re worth it.