Animate layer visibility

function fadeVisibilityOn(layer) {
  // Once this function is called, we create an animating variable
  // to keep track of the animation status.
  let animating = true;
  let opacity = 0;
  // fade layer's opacity from 0 to
  // whichever value the user has configured
  const finalOpacity = layer.opacity;
  // Start the animation by setting the layer's opacity to 0.
  // Technically the layer is now visible (because the LayerList widget
  // controls the visible property of the layer) so to create
  // the illusion of the layer being invisible, we'll set the
  // opacity to 0
  layer.opacity = opacity;

  view.whenLayerView(layer).then(function(layerView){

    // Wait for tiles to finish loading before beginning the fade-in
    // transition. The layer view's 'updating' property is true when
    // data is being downloaded and tiles are drawing in the view
    // Waiting for this property to be false makes the fade-in transition
    // smoother (you don't see tiles) though it forces the user to wait
    // a little longer for the transition to start
    watchUtils.whenFalseOnce(layerView, "updating", function(updating){
      requestAnimationFrame(incrementOpacityByFrame);
    });

    // This function will fire on every frame before the browser repaints.
    function incrementOpacityByFrame() {
      // Stop the animation if the opacity has reached the same value
      // as the pre-defined finalOpacity
      if((opacity >= finalOpacity) && animating){
        animating = false;
        return;
      }

      // Increment the opacity and set the new value on the layer
      opacity += 0.05;
      layer.opacity = opacity;

      // Continue the animation at the next frame
      requestAnimationFrame(incrementOpacityByFrame);
    }
  });
}

layerList.operationalItems.forEach(function(item){
  item.watch("visible", function(visible){
    if(visible){
      fadeVisibilityOn(item.layer);
    }
  });
});