Установка через yarn

Для использования библиотеки AOS (Animate on Scroll) в проекте на JavaScript самым удобным способом является установка через менеджер пакетов Yarn. Yarn обеспечивает удобное управление зависимостями, кэширование пакетов и ускоренную установку, что особенно важно при работе с крупными проектами.

Шаг 1. Проверка наличия Yarn

Перед установкой необходимо убедиться, что Yarn установлен в системе. Проверка производится командой в терминале:

yarn --version

Если версия отображается корректно, можно переходить к установке. В противном случае Yarn необходимо установить, следуя официальной документации на сайте https://classic.yarnpkg.com/en/docs/install.

Шаг 2. Инициализация проекта (если необходимо)

Если проект ещё не инициализирован как npm/Yarn-пакет, создается файл package.json командой:

yarn init -y

Параметр -y автоматически заполняет все поля стандартными значениями, что ускоряет процесс. После этого проект готов к добавлению зависимостей.

Шаг 3. Установка библиотеки AOS

Для добавления библиотеки в проект используется команда:

yarn add aos

Эта команда выполняет следующие действия:

  • Загружает последнюю стабильную версию AOS из репозитория npm.
  • Добавляет зависимость в package.json в раздел dependencies.
  • Создает или обновляет файл yarn.lock, фиксируя точные версии для детерминированной сборки.

Шаг 4. Подключение AOS в проект

После установки библиотеку необходимо подключить в коде. Для проекта с модульной системой ES6 можно использовать импорт:

import AOS from 'aos';
import 'aos/dist/aos.css';
  • import AOS from 'aos'; — импортирует функционал библиотеки.
  • import 'aos/dist/aos.css'; — подключает стили анимаций, без которых эффекты не будут отображаться.

Для классических HTML/JS-проектов можно подключить через <script> и <link> к локально установленным файлам:

<link rel="stylesheet" href="node_modules/aos/dist/aos.css">
<script src="node_modules/aos/dist/aos.js"></script>

Шаг 5. Инициализация библиотеки

После подключения необходимо вызвать метод инициализации:

AOS.init({
  offset: 120,       // смещение от точки начала прокрутки
  delay: 0,          // задержка анимации в миллисекундах
  duration: 400,     // длительность анимации
  easing: 'ease',    // функция плавности
  once: false,       // анимация срабатывает только один раз
  mirror: false,     // повтор анимации при прокрутке вверх
});
  • offset – задает расстояние в пикселях от верхней границы окна, при котором элемент начнет анимацию.
  • delay – определяет задержку запуска анимации.
  • duration – управляет длительностью эффекта.
  • easing – позволяет настроить плавность движения.
  • once – если true, анимация воспроизводится один раз, при false — каждый раз при прокрутке элемента в область видимости.
  • mirror – активирует воспроизведение анимации при обратной прокрутке.

Шаг 6. Проверка работы

Для проверки корректного подключения достаточно добавить элемент с атрибутом data-aos:

<div data-aos="fade-up">
  Пример анимированного блока
</div>

При прокрутке страницы этот элемент будет анимирован в соответствии с настройками. Атрибут data-aos принимает множество значений, таких как: fade, fade-up, fade-down, flip-left, zoom-in и другие.

Шаг 7. Обновление библиотеки

Если необходимо обновить AOS через Yarn до последней версии, используется команда:

yarn upgrade aos

Она обновляет пакет и фиксирует новую версию в yarn.lock, что сохраняет стабильность проекта.

Шаг 8. Удаление библиотеки

Для полного удаления AOS из проекта применяется команда:

yarn remove aos

Это действие удаляет пакет из node_modules и удаляет запись о зависимости из package.json.

Установка через Yarn обеспечивает надежное управление зависимостями и интеграцию AOS в любой проект на JavaScript, сохраняя структуру и позволяя гибко настраивать анимации на скролл.

Оглавление