JavaScript GPU Animation with Transform and Translate

Niall Crosby | 29th January 2018

There are two ways to absolute position DOM elements on the screen: 1) Using CSS position: absolute and style.top/style.left attributes; 2) Using CSS position: absolute and style.transform(translateX,translateY) attributes. This article explains what both are and demonstrates how using transform animations perform better by utilising the GPU.

Using Top / Left Attribute

Using position: absolute and style.top/style.left is the traditional way of positioning and was designed with web page layout in mind. If you animate transitions using this mechanism they do NOT use the GPU if available.

The following code snippet shows what setting this up looks like for animating the vertical position of a DOM element using style.top.

// CSS .row { // absolute positioning needed for setting top position: absolute; // put half a second animation for when top changes transition: top 0.5s; } // JavaScript, set style.top programmatically var eRow = document.querySelector('#myElement'); eRow.style.top = '500px';

Below shows an example data grid (which can be though of as a simple representation of ag-Grid). Hitting the 'Shuffle Rows' button will reverse the order of the rows akin to row sorting in a data grid. The rows are positioned using position: absolute and style.top. Notice how smooth the animation is (or is not) which we will compare with the next example.

Using Transform

Using position: absolute and style.transform(translateX,translateY) is a more modern way of doing things and was designed with utilising the GPU if it is available. The transform / translate maps with 2D Graphics operations, thus if doing animations, it can be done with your computers GPU (graphics hardware). If the GPU is used, it will give a much (MUCH) smoother animation experience.

The following code snippet shows what setting this up looks like for animating the vertical position of a DOM element using style.transform.

// CSS .row { // absolute positioning needed for transform position: absolute; // put half a second animation for when top changes transition: transform 0.5s; } // JavaScript, set style.transform programmatically var eRow = document.querySelector('#myElement'); eRow.style.transform = 'translateY(500px)';

This example is identical to the previous example with one difference - the rows are positioned using style.transform(translateX). If your computer has a GPU for doing 2D operations (all modern computers do) then you will notice a huge increase in the animation experience.

Usage in ag-Grid

For a real world example of this check out the ag-Grid main demo. ag-Grid uses this technique for animating the rows after a) the rows are sorted; b) the rows are filtered and c) a row group is opened (as rows are moved down to expand the group). This is particularly helpful with either very large grids or when using ag-Grid on lower powered devices such as tablets.

Conclusion

If you need to animate the position of DOM elements, then using transforms instead of absolute positioning will give far better results as it will harness the power of your computers GPU.

If you liked this article then please share
   
Niall Crosby

Niall Crosby

CEO / CTO

Niall provides the technical vision for ag-Grid, juggling this with the usual CEO duties. 15 years of experience building Enterprise applications has given Niall unique insight into the challenges while equipping him with the technical skills to deliver the correct solutions. Niall focuses primarily on developing and maintaining the core of ag-Grid and is very much at the heartbeat of the company.