Анимационное появление при прокрутке

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

Чтобы повесить анимационный эффект, к элементу достаточно добавить атрибут data-aos.

<div data-aos="fade-right">Эффект плавного появления</div>
<div data-aos="flip-left">Эффект плавного появления</div>
<div data-aos="zoom-in">Эффект плавного появления</div>

И запустить библиотеку, чтобы анимационные эффекты срабатывали:

AOS.init({
  duration: 1000 // скорость анимации
});

Официальный сайт (также примеры анимаций): michalsnik.github.io/aos/

Воспроизводить анимацию один раз

По умолчанию, когда браузер прокручивается обратно вверх, то анимационный эффект воспроизводится в обратном порядке. Чтобы запустить эффект только один раз, надо добавить атрибут data-aos-once="true".

<div data-aos="fade-right" data-aos-once="true">Анимационный эффект сработает только один раз</div>