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