Почему анимация на сайте не работает должным образом?

Question

[VEG Trade]

Пытаюсь сделать анимацию на нашем сайте, но столкнулся с проблемой. Анимация должна быть плавной и запускаться при скролле страницы, однако она работает некорректно: дергается и тормозит. Может кто-то подсказать, что я делаю не так?

Мой код:

document.addEventListener('scroll', function() {
  const box = document.querySelector('.animated-box');
  const section = document.querySelector('.animated-section');
  const sectionTop = section.getBoundingClientRect().top;
  const sectionHeight = section.clientHeight;
  
  if (window.scrollY > sectionTop - window.innerHeight + sectionHeight / 2) {
    box.classList.add('scrolled');
  } else {
    box.classList.remove('scrolled');
  }
});

.animated-section {
  height: 200vh; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: translateY(100px);
  transition: transform 0.5s ease-out;
}

.animated-box.scrolled {
  transform: translateY(0);
}

<div class="animated-section">
  <div class="animated-box"></div>
</div>

Comments

[Rerurk]

Flex видимо конфликтуют

[imko]

Вынеси для начала из обработчика события лишние операции,

const box = document.querySelector('.animated-box');
  const section = document.querySelector('.animated-section');
  const sectionTop = section.getBoundingClientRect().top;
  const sectionHeight = section.clientHeight;

а вообще это ситуация как раз для IntersectionObserver

[Антон Горецкий]

imko, верно, а еще на такое событие как скрол, неплохо бы дебаунсер использовать.

[Vlad_Web_net]

Используйте библиотеку GSAP