Transform isn't working with jQuery .animate()

Question

I noticed that whenever I try to use transform with a jQuery animation in the css section, it doesn't go off. It is the only property not working for me.

I am trying to use:

$(myElement).animate({
    opacity: 1, 
    transform: "scale(1.5)"
}, 7000);

But the above code only passes the opacity animation, ignoring the transform.

[From the docs](http://api.jquery.com/animate/): "*All animated properties should be animated to a **single numeric value**, [...]*" – Related: [Animate element transform rotate](https://stackoverflow.com/questions/5462275/animate-element-transform-rotate) — Jonathan Lonowski, Nov 04 '17 at 16:27
So there is no way to .animate() transform, even though it is an animatable css property? — Adam.V, Nov 04 '17 at 18:00
Not automatically, other than to just use CSS itself. – Note that jQuery's `.animate()` was created 6-7 years before CSS [Transforms](https://www.w3.org/TR/css-transforms/) became standard (2006 vs. 2012-2013). It's a purely-JavaScript implementation and was only designed to support fully-numeric styles. – That said, you can use its `step:` options, as shown in the other Q&A I linked, to fill in support for other styles using expressions. — Jonathan Lonowski, Nov 04 '17 at 18:10

score 2 · Answer 1 · answered Nov 04 '17 at 17:25

2

One solution would be to use css for the animation and jquery to add the class that does the animation.

$(myElement).addClass("animate");

.animate {
  transition: all 7s;
  transform: scale(1.5);
}

answered Nov 04 '17 at 17:25

Cole Faraday

180
6

It works, but I was trying to use .animate() in order to use velocity.js, since my website was lagging hard. – Adam.V Nov 04 '17 at 17:58
OK. I found a way to do it with .animate(). Will post another answer now – Cole Faraday Nov 04 '17 at 18:49

score 1 · Accepted Answer · answered Nov 04 '17 at 18:52

1

Using the .animate() function, this would work.

$(myElement).animate({
    height: ($(this).height()*1.5),
    width: ($(this).width()*1.5)
}, 7000);

answered Nov 04 '17 at 18:52

Cole Faraday

180
6

Transform isn't working with jQuery .animate()

2 Answers2