Однажды нужно было реализовать простую анимацию появления элементов на странице при скролле. Сначала казалось, что достаточно добавить CSS-анимацию и слушать событие scroll, чтобы запускать анимацию. Однако на практике возникли проблемы с производительностью и некорректным срабатыванием при быстром скролле.

Пришлось глубже изучить Intersection Observer API, который позволяет эффективно отслеживать появление элементов в области видимости без постоянных обработчиков scroll. Это решение значительно улучшило отзывчивость и снизило нагрузку на браузер.

Пример использования Intersection Observer:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
      observer.unobserve(entry.target); // чтобы анимация сработала один раз
    }
  });
});

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});

Таким образом, задача, казавшаяся простой, потребовала изучения новых API и оптимизации подхода.

Расскажите о какой-нибудь последней задаче, с которой пришлось повозиться — которая выглядела изначально несложно, но оказалась сложной.