title: jQuery animate not taking easing on transform
body: <p>I have a problem while trying to make a scale animation. I have a video element as a background and have scaled it to (1,1) at beginning. I have binded the mouse move in the document to get the position and scale the video whenever the mouse moves in Y axis, it scales accordingly like zoom in and out effect. However I have been trying to implement easing option to that but it just scales without the effect. Here is my code </p>
  
  <pre><code>$(document).mousemove(function(event) {
      var pos = (event.pageY / 4000);
      $("#bgvid").animate({ 
          transform: pos 
          }, 
          {   step: function(now, fx) {
                  $(this).css('-webkit-transform', 'scale('+ (1+pos) +','+ (1+pos) +')');
          },
          duration: '100',
          queue:false,
          easing:'swing'
      });
  });
  </code></pre>
  
  <p>So what it does is whenever cursor enters the document and moves in Y axis, it starts to scale from 1 to (1+value) whenever I move the cursor down/up scaling the <code>&lt;video&gt;</code> element. But it is not taking the easing. </p>
  
  <p>What I am trying to achieve is similar to this website.</p>
  
  <p><a href="http://admirhadzic.com/#/project/kamui" rel="nofollow">http://admirhadzic.com/#/project/kamui</a></p>
  
  <p>Workaround as suggested by @ntgCleaner</p>
  
  <p>my jquery</p>
  
  <pre><code>$(document).mousemove(function(event) {
      var pos = (event.pageY/50);
      var wid = 120+pos;
      $('#bgvid').stop().animate({ 
          width : wid+'%',
          left: -(pos/2)+'%'
      }, 400,false,'swing');
  });
  </code></pre>
  
  <p>element css</p>
  
  <pre><code>video.fullscreen { 
            position: absolute;
            top:0;
            left: 0;
            right:0;
            bottom: 0;
            width: 120%;
            z-index:1;
          }
  </code></pre>