Radial bar animate into viewport

Question

I've got radial bar only on one page. Also I've use some function to check the element in the view on not. I use this function for others elements on the page. My radial made with background image gradient, sure better use svg here, I've never use svg as radial bar. I need to animate the progress bar with percentages when they into the viewport. I've got example with svg radial button, better use it as callback function when in new port inside my viewport checker function? radial svg codepen codepen

<div class="container">
  <div class="item progress-42">
    <div class="radial-inner-bg"><span>42%</span></div>
  </div>
  <div class="item progress-33">
    <div class="radial-inner-bg"><span>33%</span></div>
  </div>
  <div class="item progress-20">
    <div class="radial-inner-bg"><span>20%</span></div>
  </div>
  <div class="item progress-95">
    <div class="radial-inner-bg"><span>95%</span></div>
  </div>
  <div class="item progress-85">
    <div class="radial-inner-bg"><span>85%</span></div>
  </div>
  <div class="item progress-70">
    <div class="radial-inner-bg"><span>70%</span></div>
  </div>
</div>



function isElementInViewport(elem) {
  var $elem = $(elem);
  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();
  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
  var $elem = $('.vc-key-figures-item--circle');
  var $newsArrowRight = $('.news-link .icon-slim-right');
  // If the animation has already been started
  if ($elem.hasClass('grow-js')) return;
  if (isElementInViewport($elem)) {
    // Start the animation
    $elem.addClass('grow-js');
  }
  $.each($newsArrowRight, function() {
    var element = $(this);
    if (element.hasClass('fade-in-right-js')) return;
    if (isElementInViewport(element)) {
      element.addClass('fade-in-right-js');
    }
  });
}
// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

Answer 1

I combined two script and now all working correctly check it out codepen solution. I need the advice how to optimized my code, and use best practice?

(function($) {

    var forEach = function(array, callback, scope) {
        for (var i = 0; i < array.length; i++) {
            callback.call(scope, i, array[i]);
        }
    };

    var radialBarAnimate = function() {
        var max = -219.99078369140625;
        forEach(document.querySelectorAll('.progress'), function(index, value) {
            percent = value.getAttribute('data-progress');
            progressValue = value.getAttribute('data-progress-value');
            fill = value.querySelector('.fill');
            if (fill.hasAttribute("style")) return;
            if (isElementInViewport(fill)) {
                fill.setAttribute('style', 'stroke-dashoffset: ' + ((100 - percent) / 100) * max);
                value.querySelector('.value').innerHTML = progressValue;
            }
        });
    }

    function isElementInViewport(elem) {
        var $elem = $(elem);
        // Get the scroll position of the page.
        var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
        var viewportTop = $(scrollElem).scrollTop();
        var viewportBottom = viewportTop + $(window).height();
        // Get the position of the element on the page.
        var elemTop = Math.round($elem.offset().top);
        var elemBottom = elemTop + $elem.height();
        return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
    }
    // Check if it's time to start the animation.
    function checkAnimation() {
        radialBarAnimate();
    }
    // Capture scroll events
    $(window).scroll(function() {
        checkAnimation();
    });

})(jQuery);