Fade out circle layer from center jQuery/GSOP

Question

I have created two layer div, one with background image and another with a black layer which is fading out, seems to okay but the requirement is a bit different, the fade out layer should start from center (circle), as per the example below:

This is what I have created, JSfiddle Demo

Can anybody please suggest how to get achieve that circle type centered fadeout, instead that the one which I have created? I have used greensock in my project.

Please suggest

$(document).ready(function() {
  var videoFade = $(".fade-layer");
  TweenMax.to(videoFade, 14, { x:0 , opacity:0 , ease:Power1.easeInOut ,repeat:-1  });
});

.layer-one{
  background:url(https://i.imgsafe.org/90203acca5.jpg); 
  background-size:cover; 
  background-position:center; 
  position:absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  z-index:1;
}
.fade-layer{
  background:rgba(0,0,0,1); 
  position:absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  z-index:2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div class="layer-one"></div>
<div class="fade-layer"></div>

Answer 1

I've not really worked with GASP but I was able to create a quick demo what you have to do with box-shadow. You can achieve what you are trying to do with that. Check this fiddle: https://jsfiddle.net/1uzj2v5L/4/

$(document).ready(function() {
var videoFade = $(".fade-layer");
    TweenMax.to(videoFade, 5, { x:0 , opacity:0.5 , ease:Power1.easeInOut ,repeat:-1,
    boxShadow:"0px 0px 0px 0px rgb(0,0,0) inset;"});

  });