CSS3/JS get position of element during animation

Question

I need to get position of element like (with jQuery)

$(\".mydiv\").position().left;

However I need to do it during css3 translate ani

Answer 1

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

Answer 2

well, regardless of how you create your animation, i think the best way would be to create an animation class and attach it as soon as dom loads, but only after recording the position for later use.

basically it would give you the same effect as if you set the animation right away, but you will have a record of all the details for later use:

Live Demo: Fiddle

ps: i made the demo for chrome, just change/remove the -webkit- for other browsers as needed:

-webkit-: chrome, safari
-moz-: firefox
-ms- : internet explorer
-o-: opera
without prefix: default

html:

<div id="status_div">&nbsp;</div>
<div id="slider"></div>

css:

* {
    margin:0;
    padding:0;
}
#slider {
    width:100px;
    height:100px;
    display:block;
    background:red;
}
.SliderAnim {
    -webkit-animation:some_animation 2000ms linear forwards;
}
#status_div {
    position:relative;
    left:0;
    top:0;
    width:100%;
    height:auto;
    border:2px solid navy;
    color:black;
}
@-webkit-keyframes some_animation {
    from {
        -webkit-transform:translateX(-100px);
    }
    to {
        -webkit-transform:translateX(100px);
    }
}

js:

$(function () {
    // those are the position and offset before animation was attached
    var pX = $("#slider").position().left;
    var pY = $("#slider").position().top;
    var oX = $("#slider").offset().left;
    var oY = $("#slider").offset().top;
    // those are declarations for vars which will store the position and offset
    // of the element right after attaching the animation, and will result in the values
    // of the first fram of the animation
    var npX = 0;
    var npY = 0;
    var noX = 0;
    var noY = 0;
    // this is a timer function to write the details on the status bar
    setInterval(function () {
        // those are the position and offset of the element during the animation
        var apX = $("#slider").position().left;
        var apY = $("#slider").position().top;
        var aoX = $("#slider").offset().left;
        var aoY = $("#slider").offset().top;
        //print status bar info
        $("#status_div").html("BEFORE ATTACHING ANIMATION position: " + pX + "," + pY + "  offset: " + oX + "," + oY + " <br/> AFTER ATTACHING ANIMATION position: " + npX + "," + npY + "  offset: " + noX + "," + noY + "<br/> DURING ANIMATION position: " + apX + "," + apY + "  offset: " + aoX + "," + aoY);
    }, 100);
    //attach the animation class to the slider div 
    $("#slider").addClass("SliderAnim");
    //record the changed (will result in the first animation frame)
    npX = $("#slider").position().left;
    npY = $("#slider").position().top;
    noX = $("#slider").offset().left;
    noY = $("#slider").offset().top;
});