Анимация не воспроизводится

Lottie Web требует строгого соблюдения цепочки: JSON-анимация → корректная загрузка → правильный DOM-контейнер → активное воспроизведение. Любой разрыв в этой цепочке приводит к ситуации, когда анимация не запускается или остаётся статичным элементом.

Одной из самых частых причин является некорректно заданный контейнер.

Lottie ожидает существующий DOM-элемент, в который будет отрисован canvas или SVG. Если элемент отсутствует в момент инициализации, анимация не создаётся.

Критические моменты:

  • вызов происходит до загрузки DOM
  • document.querySelector возвращает null
  • используется неправильный селектор
  • контейнер скрыт стилями с display: none на момент инициализации

Особенно важно учитывать порядок выполнения скриптов. При подключении через <script> без defer DOM может быть ещё не готов.

Ошибки загрузки JSON-файла

Lottie Web полностью зависит от корректного JSON-файла анимации.

Типовые проблемы:

  • неправильный путь к файлу
  • CORS-блокировка при загрузке с другого домена
  • сервер возвращает HTML вместо JSON
  • файл повреждён или экспортирован с ошибками

При CORS-ошибках анимация может не выдавать явного сообщения, оставаясь в состоянии «пустого контейнера».

Дополнительно стоит учитывать, что при использовании fetch или animationData структура должна быть строго валидной. Даже одно некорректное поле может остановить рендеринг.

Неверная инициализация lottie.loadAnimation

Основной метод запуска анимации — lottie.loadAnimation.

Критические параметры:

  • container — обязательный DOM-элемент
  • renderer — svg, canvas или html
  • loop и autoplay — управляют стартом

Если autoplay: false, а метод play() не вызван вручную, визуально создаётся эффект «не работает».

Типичная ошибка:

  • анимация создаётся, но не запускается из-за отсутствия autoplay

Также возможна ситуация, когда объект анимации не сохраняется в переменную, и управление проигрыванием становится невозможным.

Проблемы с автозапуском

Автовоспроизведение часто блокируется условиями окружения.

Факторы:

  • политика браузера по автозапуску медиа
  • отсутствие пользовательского взаимодействия
  • вкладка находится в фоне
  • мобильные ограничения энергосбережения

В некоторых браузерах анимации с аудио-ассоциациями или высокой нагрузкой могут блокироваться полностью до первого взаимодействия.

Ошибки в renderer (SVG / Canvas / HTML)

Выбор рендера напрямую влияет на поведение.

SVG:

  • чувствителен к DOM-структуре
  • может ломаться при сложных масках

Canvas:

  • требует поддержки 2D-контекста
  • иногда блокируется при аппаратных ограничениях

HTML:

  • наименее распространён
  • может конфликтовать с CSS-стилями

Некорректный выбор рендера может приводить к отсутствию визуального результата при формально «успешной» инициализации.

Конфликты CSS-стилей

CSS способен полностью скрыть работающую анимацию.

Ключевые проблемы:

  • width и height равны 0
  • overflow: hidden обрезает содержимое
  • opacity: 0
  • visibility: hidden
  • родительский элемент имеет display: none

Особое внимание требуется к flex- и grid-контейнерам, где элемент может схлопываться при отсутствии явных размеров.

Асинхронная загрузка и гонки состояния

При работе в SPA-фреймворках часто возникает ситуация гонки:

  • компонент смонтирован
  • контейнер ещё не доступен
  • происходит вызов loadAnimation
  • DOM обновляется позже и пересоздаёт контейнер

В результате Lottie привязывается к устаревшему элементу.

Типичный симптом — отсутствие ошибок при полном отсутствии анимации.

Повторная инициализация без уничтожения предыдущей

Если анимация инициализируется повторно без вызова destroy, возможны конфликты:

  • несколько canvas/svg накладываются друг на друга
  • управление теряет актуальный экземпляр
  • память продолжает удерживать старые рендеры

Правильная практика требует явного управления жизненным циклом анимации.

Несовместимость версии JSON из After Effects

Экспорт из After Effects через Bodymovin может создавать несовместимые структуры.

Причины:

  • использование неподдерживаемых эффектов
  • устаревшая версия плагина Bodymovin
  • сложные выражения (expressions)
  • 3D-слои, не поддерживаемые Lottie Web

В таких случаях файл может загружаться, но не отображать содержимое.

Проверка через devtools и внутренние события

Диагностика состояния Lottie возможна через события:

  • DOMLoaded
  • data_failed
  • error
  • complete

Отсутствие DOMLoaded обычно указывает на проблему загрузки JSON или контейнера.

Если события не срабатывают вовсе, проблема находится на уровне инициализации.

Проблемы с путями и сборщиками

В сборщиках (Webpack, Vite) частая ошибка связана с путями:

  • JSON не попадает в bundle
  • используется неправильный publicPath
  • файл доступен в dev, но отсутствует в production

Особенно часто это проявляется после деплоя, когда локально всё работает корректно.

Тайминги и отложенный рендер

Некоторые интерфейсы требуют принудительного ожидания:

  • requestAnimationFrame перед инициализацией
  • задержка до стабилизации layout
  • ожидание загрузки шрифтов или изображений

Если контейнер меняет размеры после запуска Lottie, анимация может оказаться невидимой из-за неверного пересчёта координат.

Потеря ссылки на экземпляр анимации

При отсутствии сохранённой ссылки:

  • невозможно вызвать play, pause, destroy
  • отладка становится затруднительной
  • управление жизненным циклом теряется

Это приводит к состоянию, где анимация «как будто не существует», хотя она создана.

Проверка минимального рабочего сценария

Базовая корректная структура включает:

  • существующий DOM-элемент с размерами
  • валидный JSON
  • вызов loadAnimation после загрузки DOM
  • autoplay: true или явный play()

Любое отклонение от этой схемы увеличивает вероятность отсутствия воспроизведения.

Оглавление