одноразовая анимация на свитке

Question

Я создаю одностраничный веб-сайт, у которого будет навигационная панель при нажатии на навигацию, и он перейдет к этому разделу.я хочу добавить элементы, которые будут иметь анимацию в некоторых разделах.Эти анимации будут воспроизводиться только один раз, когда пользователь впервые прокручивает страницу.Проблема, с которой я сталкиваюсь, заключается в том, что при прокрутке до последнего раздела или любого другого раздела после раздела анимации анимация будет воспроизводиться без уведомления пользователя.например, у меня есть три пункта меню menu1 menu2 menu3 при нажатии на любое из этих меню, прокручивается до их раздела, как menu3 перенесет меня в section_3, если у меня есть анимация в разделе 2, она будет воспроизводиться, и пользователь даже не сможет ее увидеть.поскольку мое меню будет непосредственно прокручиваться до section_3, и эта анимация также будет воспроизводиться, если пользователь просто прокручивает страницу до определенного раздела. И пункт меню, связанный с этим разделом, должен быть выделен.

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height); 

  $session_value = jQuery.session.get('ISI_state');
  $data_cookie = Cookies.get('hcp_check'); // => 'value'
  if ($session_value == undefined && window_top_position > 10 && $data_cookie != null){
      if (jQuery('.ISI_accordion_header.ui-state-active').length >= 1 && !(jQuery('.left-desc').hasClass('hidden'))){
        jQuery('.ISI_accordion_header').trigger('click');
        jQuery.session.set('ISI_state',1);
      }
  }

    var viewport = window_height/2;
    var viewport_ISI = window_height - 50;

    var sec1Strt = document.querySelector('.section1-start').getBoundingClientRect().top;
    var sec1End = (document.querySelector('.section1-end').getBoundingClientRect().top) +(jQuery('.section1-end').height());

    var sec2Strt = document.querySelectorAll('.section2-start')[0].getBoundingClientRect().top;
    if(sec2Strt==0){
        sec2Strt = document.querySelectorAll('.section2-start')[1].getBoundingClientRect().top;
    }
    var sec2End = (document.querySelector('.section2-end').getBoundingClientRect().top) +(jQuery('.section2-end').height());

    var sec3Strt = document.querySelector('#section3').getBoundingClientRect().top;
    var sec3End = sec3Strt +(jQuery('#section3').height());

    var sec4Strt = document.querySelector('#section4').getBoundingClientRect().top;
    var sec4End = sec4Strt + (jQuery('#section4').height());

    var ISIstart = document.querySelector('#ISI').getBoundingClientRect().top;

    var animatestart = document.querySelector('#animate-row').getBoundingClientRect().top;
    var animatend = animatestart+(jQuery('#animate-row').height());
    var time_line_containerStrt = document.querySelector('#time_line_container')[0].getBoundingClientRect().top;
    var time_line_containerEnd = time_line_containerStrt+(jQuery('#animate-row').height());


    if((sec1Strt<=viewport)&&(sec1End>=viewport)){
        add_menu_scroll(0);
    }
    else if((sec2Strt<=viewport)&&(sec2End>=viewport)){
        add_menu_scroll(1);

             setTimeout(function(){lineAni();},500);
              function lineAni(){
                console.log(time_line_containerStrt);
               if(jQuery('#menu-main-menu').find('li').eq(1).hasClass('current-menu-item')&&(time_line_containerStrt>=window_top_position)){
                 line_animation();     
               }        
  }
}
    else if((sec3Strt<=viewport)&&(sec3End>=viewport)){
        add_menu_scroll(2);

    }
    else if((sec4Strt<=viewport)&&(sec4End>=viewport)){
        add_menu_scroll(3);
    }else{
        jQuery('#menu-main-menu').find('li').removeClass('current-menu-item');
        jQuery('#menu-mobile-menu').find('li').removeClass('current-menu-item');
        jQuery('#menu_scroll, .mb_blank_header').hide('100');
    }

    if((ISIstart<=viewport_ISI)){
        add_class_exists(jQuery('#ISI_state'),'hide_pinned');
    }else{
        jQuery('#ISI_state').removeClass('hide_pinned');
    }

    if((animatestart<=viewport)&&(animatend>=viewport)){
      setTimeout(function(){circleAni();},500);
   function circleAni(){
       if(jQuery('#menu-main-menu').find('li').eq(1).hasClass('current-menu-item')&&((animatestart<=viewport)&&(animatend>=viewport))){
           circle_animation();
        }
 }

}}

});

var $ window = jQuery (window);$ window.on ('scroll resize', check_if_in_view);

работает нормально, есть ли другой способ, слишком большой и потребляющий слишком много вычислительной мощности