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?
Since the question is tagged javascript (P.S: jQuery is JS)
Use Element.getBoundingClientRect()
Here's just a small example that retrieves the .left Rect property from a CSS3 translated (animated) element:
function EL(id){return document.getElementById(id);}
EL("btn").addEventListener("click", function(){
this.textContent = EL("box").getBoundingClientRect().left;
}, false);#box{
width:30px; height:30px; background:red;
-webkit-animation: anim 3s infinite alternate;
animation: anim 3s infinite alternate;
}
@-webkit-keyframes anim {to{ -webkit-transform:translate3d(300px, 0, 0); }}
@keyframes anim {to{ transform:translate3d(300px, 0, 0); }}<button id="btn">Get LEFT position</button>
<div id="box"></div>