Как сделать, чтобы анимация срабатывала один раз при скролле?

Question

[Дмитрий]

Помогите пли, как сделать, чтобы анимация при скролле срабатывала один раз. То есть, когда анимация сработала, при повторном скролле она уже не срабатывала

Пример в codepen (https://codepen.io/Voqi/pen/dygvPeY)

Comments

[Шам]

зачем там settimeout c этой же функцией, которая на onscroll? Слушатель на scroll убирается window.removeEventListener('scroll', animOnScroll) где угодно, хоть в самой animOnScroll наверное

Answer 1

[Noder SS]

Лучше вообще все заменить, к примеру на это:

function onEntry(entry) {
      entry.forEach(change => {
        if (change.isIntersecting) {
         change.target.classList.add('element-show');
        
        }
      });
    }
        let options = {
      threshold: [0.5] };
    let observer = new IntersectionObserver(onEntry, options);
    let elements = document.querySelectorAll('.element-animation');
    
    for (let elm of elements) {
      observer.observe(elm);
    }

.element-animation{

            top: 0px;
            opacity: 0;
            position: relative;
        }
        .element-animation.element-show{
        position: relative;
        top: 20px;
    opacity: 1;
    transition-duration: 1.4s;
        }
      
      .info-head.menu-margin{
margin-top: -140px;

          transition-duration: .6s !important;
      }

Элементу с анимацией прописать класс element-animation