jQuery animate a -webkit-transform

Question

Is it possible to use jQuery to animate a webkit translate3d?

I read that when using the animate property of jQuery that you must camel case the css properties but i

Answer 1

Use a text-indent and it will work. Example:

$(".test").animate({ textIndent: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
    },
    duration:'slow'
},'linear');

Also, you can remove scale(1) from -webkit-transform.

JSFIDDLE

To avoid changing of a useful property you can give any property there. See the example bellow:

$(".test").animate({ whyNotToUseANonExistingProperty: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
    },
    duration:'slow'
},'linear');

JSFIDDLE

And because I am a Firefox fan, please implement Firefox compatibility too adding this line, like here:

$(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)");

Answer 2

I think that you may be trying to animate a property that jQuery does not natively support, your best bet is probably to use a plugin such as this: http://ricostacruz.com/jquery.transit/

Instead of then using the .animate function you would use .transition such as follows:

$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });

Answer 3

I do this by animating an arbitrary value then using the step callback to apply some CSS which I have written into a simple method. Perhaps some experts can chime in on why this is good or bad, but it works for me and doesn't force me to install any additional plugins. Here's an example.

In this example I apply a 100px transform then reduce it to 0 using the jQuery .animate() method.

var $elem
  , applyEffect
  ;

$elem = $('.some_elements');

applyEffect = function ($e, v) {
  $e.css({
    '-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  , '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  , 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  });
};

applyEffect($elem, 100);

$elem.animate({
  foo: 100
}, {
  duration: 1000
, step: function (v) {
    applyEffect($elem, 100 - v);
  }
}
);