Untitled

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<style>
.bubble {
    transform: scale(0);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: #C00;
    transition: all 1s;
}
.bubble.animate {
    transform: scale(1);
}
</style>
</head>
<body>

  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <div class='bubble'></div>

<script>
$(document).ready(function() {
$(window).scroll( function(){

      /* Check the location of each desired element */
      $('.bubble').each( function(i){

        var elemTop = $(this).getBoundingClientRect().top;
        var elemBottom = $(this).getBoundingClientRect().bottom;
        var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);

          /* If the object is completely visible in the window, fade it it */
          if(isVisible){

              $(this).addClass('animate');

          }

      });
});
  });
</script>
</body>
</html>