Fade out cercle couche du centre jQuery/GSOP

Question

J'ai créé div deux couches, une avec l'image de fond et l'autre avec un fond noir qui est en train de disparaître, semble bien mais l'exigence est un peu différente, la couche de fondu devrait début du centre (cercle), comme dans l'exemple ci-dessous:

C'est ce que j'ai créé, JSfiddle Demo

Quelqu'un peut-il s'il vous plaît suggérer comment obtenir atteindre cet fadeout centrée type de cercle, au lieu que celui que j'ai créé? J'ai utilisé greensock dans mon projet.

S'il vous plaît suggérer

$(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

On dirait que vous pouvez utiliser un seul élément pour l'arrière-plan, un élément pseudo pour la superposition noire, un radial-gradient() pour créer le cercle de superposition, et une animation CSS pour fanent la superposition sur.

Voici une démo.

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>

Answer 2

Je n'ai pas vraiment travaillé avec GASP mais j'ai pu créer une démonstration rapide ce que vous avez à faire avec box-shadow. Vous pouvez réaliser ce que vous essayez de faire avec cela. Vérifiez ce violon: 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;"}); 

    });