Trigger animation when div element appears in viewport

Question

I am using a scroll trigger from this answer to build a progressbar.js animation that is triggered once the entire progress bar div is in the viewport.

The animation works normally with no trigger, it just runs on page load. But I can't make it trigger when the element scrolls into full view.

The example code below has a div gap at the top so you can scroll down before the animation starts, although that is obviously the part I cannot get working.

function privacyScoreCircle() {
  // progressbar.js circle
  var bar = new ProgressBar.Circle(document.getElementById('privacy-score-circle'), {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 4,
    trailWidth: 4,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: false
    },
    from: {
      color: '#dddddd',
      width: 4
    },
    to: {
      color: '#aaaaaa',
      width: 4
    },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + '%');
      }

    }
  });
  bar.text.style.fontFamily = '"Montserrat", sans-serif';
  bar.text.style.fontSize = '1.7rem';
  bar.trail.setAttribute('stroke-linecap', 'round');
  bar.path.setAttribute('stroke-linecap', 'round');
  //bar.animate(0.97); // <-- ANIMATION CAN BE TRIGGERED INSTANTLY USING THIS

}
privacyScoreCircle();

// Check if element is scrolled into view
function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function Utils() {

}

Utils.prototype = {
  constructor: Utils,
  isElementInView: function(element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
      return ((pageTop < elementTop) && (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
    }
  }
};

var Utils = new Utils();

var isElementInView = Utils.isElementInView($('#privacy-score-circle'), false);

if (isElementInView) {
  bar.animate(0.97);
}

#gap {
  height: 500px;
}

#privacy-score-circle {
  margin: auto;
  width: 200px;
  height: 200px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<div id="gap">Scroll down to activate animation</div>
<div id="privacy-score-circle"></div>

Answer 1

You should apply these changes in your code:

1. You declared the bar variable within privacyScoreCircle() function. Variables defined inside a function are not accessible from outside the function. So, define it as a global variable.
2. You should execute animation when window is being scrolled.

You can see the code that works correctly here.