There is a code: when the scroll reaches a certain div, this div appears with animation. After that, when I am already on this diva and scrolling through the scroll, the progress bar animation is triggered anew. How to fix that the progress bar animation was only once when scrolling to this block. I hope the question is clear.

var h = $(window).height(); $(window).scroll(function(){ if ( ($(this).scrollTop()+h) >= $(".services-procent-ul").offset().top) { $(".op").css({visibility:"visible"}); $(".op").addClass('animated zoomIn'); $('.circle1').circleProgress({ value: 0.9, emptyFill: "#504a3f", startAngle: -Math.PI/2, size: 110, animation: {duration: 6000}, thickness: "15", fill: { color: "#bae103" } }).on('circle-animation-progress', function(event,progress, stepValue) { $(this).find('strong').text(100*String(stepValue.toFixed(1))+'%'); }); } });

    2 answers 2

    I decided.

     $(window).bind('scroll.once', function(){ show_graphics(); }); function show_graphics() { //run code $(window).unbind('scroll.once') };

      I'll try to guess:

       $(window).one('scroll', function() {

      In general, it is desirable to give a working example with markup in the question.

      • If is on this diva when you refresh the page, then everything appears. And if you scroll to the top of the block, then there will be empty. - Nikita True
      • It is necessary that when you first scroll to div, the script no longer works. - Nikita True
      • Add a flag (for example, a data-attribute which is something for a diva), as soon as a div appears you install into true. Before you trigger an animation, check for a flag. - Reinq
      • Thanks, I will try - Nikita True