Get divs position after translate3d

Question

In Javascript, when I move an element using the gpu via the translate3d method, the elements style-left position doesnt change at all. As the cpu isnt even aware any motion has occurred.

How do I track what the new position of an element is, after moving it via translate3d?

Answer 1

Use Element.getBoundingClientRect() to get the element coordinates

Here's just a small example that retrieves the .left Rect property from a CSS3 translated (animated) element:

 const box = document.getElementById('box'); const printer = document.getElementById('printer'); const printBoxRectLeft = () => { printer.textContent = box.getBoundingClientRect().left; requestAnimationFrame(printBoxRectLeft); }; printBoxRectLeft(); 

 #box{ width:30px; height:30px; background:red; animation: animX 3s infinite alternate; } @keyframes animX { to{ transform:translateX(300px); }} 

 <div id="printer"></div> <div id="box"></div> 

Answer 2

The style attribute left is set to auto if you do not set it manually. But you should be able to use the jquery function position().

    var position = $('#element').position();
    var left = position.left;

http://jsfiddle.net/nqab2aw7/2/

Answer 3

The other answers that use getBoundingClientRect work, but if you want to get the actual numeric values from a translate3d string, use a RegExp :

var xyzArray;
let translate3dValue = 'translate3d(256px, 512px, 0px)';
xyzArray = translate3dValue.replace(/translate3d|px|\(|\)/gi, '').split(',');