jQuery animate not taking easing on transform

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

$(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'
    });
});

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 <video> element. But it is not taking the easing.

What I am trying to achieve is similar to this website.

http://admirhadzic.com/#/project/kamui

Workaround as suggested by @ntgCleaner

my jquery

$(document).mousemove(function(event) {
    var pos = (event.pageY/50);
    var wid = 120+pos;
    $('#bgvid').stop().animate({ 
        width : wid+'%',
        left: -(pos/2)+'%'
    }, 400,false,'swing');
});

element css

video.fullscreen { 
          position: absolute;
          top:0;
          left: 0;
          right:0;
          bottom: 0;
          width: 120%;
          z-index:1;
        }

Solution

So, I've made a fiddle for you here.

What I've done is make a container for the thing you want to scale, then I've used CSS width to scale the container. I also added a transition effect on the container that's being animated so the thing will ease as you want.

html

<div class="box-container">
    <div class="box"></div>
</div>

$(document).on('mousemove', function(e){
    var mouseY = e.pageY;
    $('.box-container').css({"width":mouseY+"px"});
})

css

.box-container {
    width:200px;
    position:relative;
    transition:all 400ms ease-out; /* NOTE THIS LINE HERE FOR EASING */
}
.box-container:after {
    content:"";
    display:block;
    padding-top:100%;
}
.box {
    position:absolute;
}