JavaScript rotation is incorrect after translation

Question

I use Velocity.js for animation.

I am the first translation and rotation of the object. After the animation is complete, I need to rotate the object 360 degrees.

The problem is that during the second animation, the rotation axis is turned off. Instead of turning around the center, the object rotates around its starting point.

$.Velocity( obj, "stop" );
$.Velocity( obj,
              {translateX: pos, rotateZ: rotation + 'deg'},
              {duration: 1000, complete: function() {
                  $.Velocity( obj, {rotateZ: "360deg"}, {duration: 1000} ); }
             });

What could be the problem?

UPDATE

Codepen that demonstrates the problem: http://codepen.io/anon/pen/MYZaaj

Answer 1

Sorry, I do not have enough points for comments, but a hook (another answer is correct). Just add $ .Velocity.hook (circle, "translateY", "0");

var circle = $(".circle");

circle.velocity({
  translateX: 500,
  rotateZ: 360
}, {
  duration: 2500
}).delay(500).velocity({
  rotateZ: -360 * 2,
  translateY: 200
}, {
  duration: 2500
});
$.Velocity.hook(circle, "translateY", "0");

circle.delay(500)
  .velocity({
    translateY: 0,
    rotateZ: -360 * 5
  }, {
    duration: 2500
  });

.circle {
  background: url("https://dl.dropboxusercontent.com/u/16997159/square.png");
  width: 128px;
  height: 128px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<div class="circle">
</div>

Answer 2

, Velocity transform. :

, Velocity , ( , , Forcefeeding). ( Velocity Hook.)

, , .