How to do a transform scale animation with jQuery?

I'm trying achieve and "opening-window" animation, I tried the following:

import $ from 'jquery'

export const fade = {
  css: false,
  enter: function (el, done) {
      .css('opacity', 0)
      .css({ transform: 'scale(0.9,0.9)' })
        opacity: 1,
        transform: 'scale(1,1)'
      }, 1000, done)
  enterCancelled: function (el) {
  leave: function (el, done) {
      opacity: 0,
      transform: 'scale(0.9,0.9)'
    }, 1000, done)
  leaveCancelled: function (el) {

But only the opacity animation works (it goes from 0 to 1). And only transform: 'scale(0.9,0.9)' is being applied.

Note: I also tried with '-webkit-transform' since I'm using Chrome, but it didn't work either.

What's the reason transform isn't working?

Answers 1

  • Of course that css transition is much better then jQuery animate.

    Here is a generic example of how animate transform with jQuery.

    The trick is to set unaffected css property (like border-spacing) and "animate" it. Then, you can use the step callback to create your own animation effect.

    $('button').click(function() {
      $('div').css('borderSpacing', 1).animate(
          borderSpacing: 1.3
        step: function(now,fx) {
    div {
    <script src=""></script>

Related Articles