Активируйте анимацию Progress Bar JS, когда пользователь увидит Контент

Question

Так что я буквально часами проводил на форумах и в гугле, пытаясь найти похожий случай с моим, но ничего не смог подыскать. Я использую библиотеку ProgressBar.js для анимации моих индикаторов выполнения и не могу найти, как их анимировать, когда пользователь действительно их видит. они оживляются до того, как пользователь действительно доберется до контента, вот мой код

   <div class="tech-skills" class="tech">

        <div>
            <h3>Cloud Computing</h3>
            <div id="cloud" class="cloud"></div>
        </div>

        <div>
            <h3>Infrastructure</h3>
            <div id="infra" class="infra"></div>
        </div>

        <div>
            <h3>Windows Azure</h3>
            <div id="azure" class="azure"></div>
        </div>

        <div>
            <h3>DevOps</h3>
            <div id="devops" class="devops"></div>
        </div>

        <div>
            <h3>Pre-Sales</h3>
            <div id="sales" class="sales"></div>
        </div>

</div>

Код JS

   var cloudcomputing = new ProgressBar.Line('#cloud', {
     color: '#4AAACA',
     duration: 3000,
     easing: 'easeInOut',
     text: {
    // Initial value for text.
    // Default: null
    value: '94%',
    style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',
    }

    }
  });

  cloudcomputing.animate(0.95);

  // Second 

     var infrastructure = new ProgressBar.Line('#infra', {
       color: '#4AAACA',
       duration: 3000,
       easing: 'easeInOut',
       text: {
    // Initial value for text.
    // Default: null
    value: '80%',
    style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',

    }

       }
  });

  infrastructure.animate(0.8);


   // Third 

     var windowsazure = new ProgressBar.Line('#azure', {
       color: '#4AAACA',
       duration: 3000,
       easing: 'easeInOut',
       text: {
    // Initial value for text.
    // Default: null
    value: '83%',
    style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',
    }

   }
 });

    windowsazure.animate(0.83);

  // Fourth


    var devops = new ProgressBar.Line('#devops', {
color: '#4AAACA',
duration: 3000,
easing: 'easeInOut',
text: {
    // Initial value for text.
    // Default: null
    value: '80%',
    style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',
    }

   }
 });

   devops.animate(0.8);

 // Fifth 

    var presales = new ProgressBar.Line('#sales', {
       color: '#4AAACA',
       duration: 3000,
       easing: 'easeInOut',
       text: {
    // Initial value for text.
    // Default: null
       value: '73%',
       style:{
        color:"black",
        position: 'absolute',
        left:'103%',
        top: '-25px',
    }
      }
     });

      presales.animate(0.7);


     // Personal Skills Animation

    // First




var vision = new ProgressBar.Circle('#vision', {
    color: 'url(#gradient1)',
    duration: 3000,
    easing: 'easeInOut',
    strokeWidth: 3,
    text: {
        // Initial value for text.
        // Default: null
        value: '83%',
        style:{

            position: 'absolute',
            left: '48.5%',
            top: '40%',
        }

    }

});
vision.svg.insertAdjacentHTML('afterbegin', Gradient1);   
vision.animate(0.84);

// Second

var active = new ProgressBar.Circle('#listening', {
    color: 'url(#gradient2)',
    duration: 3000,
    easing: 'easeInOut',
    strokeWidth: 3,
    text: {
        // Initial value for text.
        // Default: null
        value: '95%',
        style:{
            position: 'absolute',
            left: '40%',
            top: '40%',
        }

    }
});
active.svg.insertAdjacentHTML('afterbegin', Gradient2);   
active.animate(0.9);

// Third

var problem = new ProgressBar.Circle('#solving', {
    color: 'url(#gradient3)',
    duration: 3000,
    easing: 'easeInOut',
    strokeWidth: 3,
    text: {
        // Initial value for text.
        // Default: null
        value: '75%',
        style:{
            position: 'absolute',
            left: '40%',
            top: '40%',
        }

    }
});

problem.svg.insertAdjacentHTML('afterbegin', Gradient3);   
problem.animate(0.8);