Velocity equivalent of jQuery marginLeft

Question

I had a question for anybody familiar with the jQuery plug-in velocity.js. I'm trying to get an item to slide in from the left. Here is the equivalent jquery code:

$el.animate({marginLeft: '-150px', height: '20px'})
insert()
$el.animate({marginLeft: '0px', height: '20px'})

This does what I want, I'm trying to do the same thing with velocity, I'm currently using translateX as such:

$el.velocity({translateX: '-150px', height: '0px', duration: 0})
insert()
$el.animate({translateX: '0px', height: '20px'})

The problem is the item spawns at 0, moves to -150, and slides back in to 0. How can I get it to spawn at -150?

EDIT - Solved

If anybody else is interested, I had to set the overflow property to hidden:

$el.css({marginLeft: '-150px', height: '0px', overflow: 'hidden'});
insert()
$el.velocity({marginLeft: '0px', height: '20px'});

Also, the insert() function is native to the Vue.js MVVM framework. That was probably confusing, it inserts the element: http://vuejs.org/guide/transitions.html

Answer 1

See "$.css()-like Transform Setting" in the Velocity FAQ: https://github.com/julianshapiro/velocity/issues/47.

Might be of use. Either way, I'm confused by your question and your code samples :-p.