Animation when scrolling progress bar

 var bar = new ProgressBar.Circle(container, { strokeWidth: 6, easing: 'easeInOut', duration: 1400, color: '#FFEA82', trailColor: '#eee', trailWidth: 1, svgStyle: null }); // Функция, которая var visible = function(e) { var elementTop = window.pageYOffset + e.getBoundingClientRect().top, // Получаем координаты верхней части элементы windowBottom = window.pageYOffset + document.documentElement.clientHeight; // Получаем положение нижней части окна // Если положение нижней части окна больше чем верхняя координата элемента, то мы долистали до элемента // Так же проверим, не запущена ли уже анимация, а то выйдет казус в виде всё время запускающееся анимации if(elementTop < windowBottom && Number(e.dataset.animationState) === 0){ bar.animate(1.0); // Number from 0.0 to 1.0 e.dataset.animationState = 1; // Отмечаем, что анимация запущена }; }; // Получаем нужный элемент var element = document.querySelector('#container'); // Запускаем функцию // Запускаем при скролле window.addEventListener('scroll', function() { visible(element); }); // И сразу при загрузке страницы. Вдруг элемент уже находится в видимой области visible(element); 

 #container { margin: 20px; width: 200px; height: 200px; } 

 <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> <div id="container" data-animation-state="0"></div>