Fade out circle layer from center jQuery/GSOP

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>

Solution

Seems like you could use a single element for the background, a pseudo element for the black overlay, a radial-gradient() to create the overlay circle, and a CSS animation to fade the overlay out.

Here's a demo.

div, div:after {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
div {
  background: url(https://i.imgsafe.org/90203acca5.jpg);
  background-size: cover;
  background-position: center;
}
div:after {
  content: '';
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, black 100%);
  animation: fadeOut 10s forwards;
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

<div></div>