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 in the case of the translate3d this doesn't seem to work.

I have the following code that I would like to animate instead of it just happening immediately?

$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)");

For clarification "e" is a variable that is passed to a function that my above code is run from.

Solution 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)");

Solution 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)" });

Solution 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);
  }
}
);

Comments

[Ionică Bizău]

This can be done only with jQuery natively support. See my answer.

[Apqu]

@John Interesting answer, you learn something new every day +1 ;-)

[A. Wolff]

text-indent here is what is animate, firing then the step callback. I'll suggest to use instead opacity as it doesn't really change expected behaviour of animation if animated element content other elements: jsfiddle.net/xXWYW/2

[Admin]

Thanks for your answer and supporting comments guys, I've managed to get it to work using your JSFiddles as the basis A***

[Ionică Bizău]

@user2440843, you are welcome. We are learning here too, helping others. :-)

[eug]

Just a note: jquery.transit uses CSS transitions which may not be supported on your target devices

[Liam Shalon]

I wasn't able to get the duration, or delay to work... do you have any reasaons why? Here is my code - $("#wheel").animate({ textIndent: 100 }, { step: function(now,fx) { $(this).css('-webkit-transform',"rotate(0deg)"); },duration:'slow'}, 'swing');

[Ionică Bizău]

@LiamShalon You have a syntax error and you don't use now parameter to animate the elemenent. This should work: $("#wheel").animate({ textIndent: 100 }, { step: function(now,fx) { $(this).css('-webkit-transform',"rotate(" + now + "deg)"); }, duration:'slow'}, 'swing');

[rb-]

I don't find this answer sufficient because it limits you to using text-indent. There are cases where a CSS property which is not natively supported must be used and cannot be substituted with one that is.

[Peter Zhu]

@A.Wolff I quite not understand why the nonExistProperty should work while I delete the nonExistProperty and it never work again. Can you give a deep explaination?