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

JS Библиотеки
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>