CSS3/JS get position of element during animation

css, javascript, jquery

Solution

Edit

"I'm not using .animate for simple animations since css3. – Kluska000"

Should still be able to utilize jquery's `animate()` `start`, `step`, `progress` callback functions - even though actual animation done at `css`. e.g., could utilize `.animate()` at target element - without actually animating the element - only to utilize `start`, `step`, `progress` callback functions; with `duration` synced to `css` animations duration . Also, appear that jquery `.animate()` does not actually require that a target be a `DOM` element; could be 2 js `objects`.

See also `window.requestAnimationFrame()`

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Try (see `console` at jsfiddle, linked below)

  $(function() {
    $(".mydiv").animate({
      left :"0px"
      }, {
      duration : 1234,
      start : function (promise) {
              console.log($(".mydiv").position().left);
      },
      step : function (now, tween) {
              console.log($(".mydiv").position().left); 
      },
      progress : function (promise) {
              console.log($(".mydiv").position().left); 
      },
      complete : function () {
              $(this).animate({left:"0px"}, 1234)
      }
    });  
  });

jsfiddle http://jsfiddle.net/guest271314/xwL7v/

See http://api.jquery.com/animate/ at `start` , `step` , `progress`

Problem

I need to get position of element like (with jQuery) ``` $(".mydiv").position().left; ``` However I need to do it during `css3 translate animation`. This animation translate of div position is included in `position()` data. Is it possible to get position of element during animation, but position without any translations (just like there would be no animation)?

Original source