How To Animate Translate Properties With Velocity.js?

I have a simple block that is suppose to move left 200px with translateX. It will move left with position left. I can't seem to move the block with translateX or translateY. CSS va

Solution 1:

In Velocity V2 there are no longer any transform shortcuts such as translateX - just use the css transform property properly and it'll work (there are issues in V1 with trying to do that unfortunately).

Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

If there's no forcefeeding it'll animate from a value of 0.

Solution 2:

Velocity seems to be picking up steam with version 3 of VUE coming up. I highly suggest the Velocity 2.0 docs to be a little more updated with information such as:

In Velocity V2 there are no longer any transform shortcuts such as translateX - just use the css transform property properly and it'll work (there are issues in V1 with trying to do that unfortunately). Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

Or reach out to the VUE team as they are still using the Velocity 1.x examples.

Solution 3:

Easy example with jQuery:

$('.box').on('click', function() {  
  $(this).velocity({
    transform: ["translateX(100px)", "translateX(0px)"]
  }, {duration: 1000});
});