AOS - плавная анимация при скролле

AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.

Инструкция по установке и настройке AOS

Рассмотрим на примере подключения через CDN

Шаг 1.

Подключить перед закрывающим тегом </head> CSS файл

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Перед закрывающим тегом </body> подключить JS файл

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Шаг 2.

Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить

<script>
    AOS.init();
</script>

Шаг 3.

Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации

<div data-aos="fade-up-right"></div>

Прочие настройки

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
</div>