Как отключить анимацию за пределами Viewport

Для отключения анимации элементов вне viewport можно использовать Intersection Observer API. Он позволяет отслеживать видимость элементов и включать/выключать анимации.

Пример:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    } else {
      entry.target.classList.remove('animate');
    }
  });
});

document.querySelectorAll('.animated-element').forEach(el => {
observer.observe(el);
});

CSS:
```css
.animated-element {
  opacity: 0;
  transition: opacity 0.5s;
}

.animated-element.animate {
  opacity: 1;
}

Альтернатива - библиотеки типа AOS (Animate On Scroll), которые предоставляют готовые решения для таких случаев.