Lottie-анимация в Tilda: как добавить в Zero Block и настроить запуск
Готовая анимация может показывать работу продукта, оживлять значок или сопровождать объяснение. Но одной ссылки на страницу просмотра недостаточно: сайту нужен сам файл и место, где он будет проигрываться.
Конструктор Lottie-анимации связывает файл с плеером в Zero Block. У подключения две части: область плеера и код управления. Ниже разберём их по порядку, чтобы не потерять связь между ними.
Как подготовить файл анимации
Нужна прямая ссылка на .json или .lottie. Она должна открывать файл, а не страницу сервиса с кнопкой воспроизведения. Замените демонстрационный адрес в конструкторе и дождитесь собственной анимации в превью.
Если файл не появился, начните с адреса и доступа к нему. Хостинг должен разрешать браузеру загружать файл с вашего сайта. Не пытайтесь исправить размеры плеера, пока сама анимация ещё не загрузилась.
Как выбрать момент запуска
Выберите поведение по задаче: автоматическое воспроизведение, вход в экран, прокрутка, наведение, клик или управление курсором. Значку кнопки обычно достаточно короткой реакции. Схему из нескольких этапов удобнее показывать по мере чтения.
Не включайте одновременно везде одинаковое бесконечное движение. Подберите скорость и нужный диапазон кадров. Если конец не задан, используется конец файла. Проверьте, сохраняет ли выбранный отрезок смысл: случайный обрыв может выглядеть как ошибка.
Как разместить плеер в Zero Block
Добавьте HTML-элемент внутри Zero Block. В конструкторе нажмите «Скопировать плеер» и вставьте этот фрагмент в элемент. Здесь находится сама область анимации, поэтому её размер и положение настраиваются в Zero.
Пройдите нужные адаптивы. Широкая иллюстрация может хорошо смотреться рядом с заголовком на компьютере и требовать отдельной строки на телефоне. Настройте вписывание и фон, чтобы рисунок не обрезался и не оставлял случайную цветную рамку.
Зачем нужен второй фрагмент в T123
Кнопка «Копировать код» под превью даёт управление плеером. Вставьте этот фрагмент в T123 сразу после Zero Block. Плеер и код должны быть получены из одной конфигурации с одинаковым итоговым ID.
Для нескольких анимаций задайте каждой отдельный номер. Если изменили номер или режим, обновите оба фрагмента. Иначе на странице может остаться плеер с одним ID, а код будет искать другой. Повтор одинаковых ID тоже мешает понять, каким элементом управлять.
Что показать на телефоне и без движения
Наведение мышью невозможно повторить на обычном сенсорном экране. Для управления курсором выберите предусмотренную замену: начальный кадр, конечный кадр или однократное воспроизведение. Проверьте её на телефоне, а не только уменьшением окна компьютера.
Включите учёт уменьшения движения и выберите подходящий статичный кадр. Он должен сохранять смысл иллюстрации. Если важная надпись появляется только в середине анимации, продублируйте её обычным текстом страницы — так объяснение останется доступным.
Как проверить готовое подключение
- Опубликуйте страницу с обеими частями подключения.
- Проверьте загрузку собственного файла и совпадение ID.
- Повторите выбранное действие: скролл, клик или наведение.
- Проверьте размеры на телефоне и назначенную замену управления.
- Включите уменьшение движения в системе и посмотрите выбранный кадр.
Если анимация не работает, проверяйте последовательно: файл, плеер, код запуска, режим. Так проще найти потерянную часть, чем сразу менять все настройки.
Вопросы и ответы
Можно установить только код в T123?
Для этого конструктора нужны обе части: HTML-плеер в Zero Block и код запуска в T123.
Подойдёт ссылка на страницу просмотра анимации?
Нужен прямой доступ к файлу .json или .lottie. Страница сервиса сама по себе таким файлом не является.
Можно добавить несколько анимаций?
Да. У каждой должен быть свой номер и соответствующая пара фрагментов с уникальным ID.
Что увидит человек с уменьшением движения?
При включённом учёте этой настройки — выбранный начальный или конечный статичный кадр.
