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.

camelCase is not a MUST have when passing to animate function — A. Wolff, Jun 06 '13 at 09:51

Ionică Bizău · Accepted Answer · 2013-06-06T10:23:06.467

21

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

edited Jun 06 '13 at 10:23

answered Jun 06 '13 at 09:56

Ionică Bizău

109,027
88
289
474

4

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: http://jsfiddle.net/xXWYW/2/ – A. Wolff Jun 06 '13 at 10:04
Thanks for your answer and supporting comments guys, I've managed to get it to work using your JSFiddles as the basis A*** – Jun 06 '13 at 10:25
@user2440843, you are welcome. We are learning here too, helping others. :-) – Ionică Bizău Jun 06 '13 at 10:28
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'); – Liam Shalon Jun 17 '14 at 00:03
@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'); ` – Ionică Bizău Jun 17 '14 at 04:48
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. – rb- Oct 06 '14 at 18:01
@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? – Peter Zhu May 08 '15 at 03:15

Apqu · Answer 2 · 2013-06-06T10:21:46.900

5

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

edited Jun 06 '13 at 10:21

answered Jun 06 '13 at 09:54

Apqu

4,880
8
42
68

1

This **can be done** only with jQuery natively support. See [my answer](http://stackoverflow.com/a/16959065/1420197). – Ionică Bizău Jun 06 '13 at 10:00
1

@John Interesting answer, you learn something new every day +1 ;-) – Apqu Jun 06 '13 at 10:03
1

Just a note: jquery.transit uses CSS transitions which may not be supported on your target devices – eug Dec 09 '13 at 06:51

score 1 · Answer 3 · answered Oct 06 '14 at 17:59

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

jQuery animate a -webkit-transform

3 Answers3

Linked