Тильда анимация - это в первую очередь настройки блока Zero Block: там уже встроены появление элементов при скролле, параллакс фона и ховер-эффекты без единой строчки кода. Но как только нужна анимация, привязанная к прогрессу скролла, текст, разлетающийся по буквам, или Lottie-персонаж, реагирующий на курсор, штатных настроек не хватает и в дело идёт кастомный JS. По опыту доработок сайтов на Тильде я вывел для себя понятную границу: где заканчивается конструктор и начинается код, и что это стоит в деньгах и днях.
По теме статьи
Готовое решение
Скрипт расчёта налога (НДС) в корзине Tilda
Автоматический расчёт НДС отдельной строкой в корзине Tilda — для США, ЕС и B2B.
от5 000 ₽
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Что умеет анимация в Zero Block без единой строчки кода
Zero Block (T123) - это отдельный тип блока в Тильде с собственным редактором, где у каждого элемента есть панель настроек с вкладкой анимации. Из коробки доступно:
- Появление элементов при скролле: fade, слайд с любой стороны, увеличение, поворот - с настройкой длительности и задержки для каждого элемента отдельно
- Параллакс для фонового изображения в блоке-обложке - фон двигается медленнее контента при скролле
- Ховер-эффекты у кнопок и картинок: смена цвета, появление тени, масштабирование
- Lottie-элемент - можно вставить готовую анимацию из JSON-файла и настроить её проигрывание при входе в область видимости, зацикливание или запуск по наведению
- Готовый блок с бегущей строкой для лозунгов, тегов или логотипов партнёров
- Видео-фон в обложке блока с автозапуском
Для большинства лендингов и промо-страниц этого достаточно. Я собираю обычные сайты на Тильде именно на этих настройках, не трогая код, если клиенту важен предсказуемый бюджет и сроки.
Как настроить появление при скролле в Zero Block
Последовательность одинаковая для любого элемента блока:
- Выделяю элемент (текст, картинку, кнопку, группу) на холсте Zero Block
- Открываю панель настроек справа и перехожу на вкладку с анимацией появления
- Выбираю тип эффекта - fade, слайд, zoom или поворот
- Задаю длительность анимации и задержку срабатывания, если элементы должны появляться по очереди
- Проверяю на предпросмотре при разных скоростях скролла и на мобильной версии отдельно
Мобильная адаптация настраивается отдельно от десктопной версии блока, поэтому тяжёлые эффекты я обычно упрощаю или отключаю на телефонах, чтобы страница не дёргалась на слабом железе.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Где Zero Block упирается в потолок
Встроенная анимация появления срабатывает один раз - элемент доехал до триггерной точки на экране и проиграл эффект. Это не то же самое, что анимация, прогресс которой напрямую зависит от текущей позиции скролла: например, слой фона едет с одной скоростью, слой переднего плана с другой, и всё это управляется одним общим прогрессом прокрутки страницы. Такую механику скролл-скраббинга и пиннинг секции (когда блок залипает на экране, пока не доиграет анимация) настройками Zero Block не собрать.
Ещё пара ограничений, с которыми я регулярно сталкиваюсь на практике:
- Анимация появления работает на уровне блока или элемента целиком, а не по отдельным буквам или словам внутри текста
- У Lottie-элемента набор триггеров ограничен просмотром, зацикливанием и ховером - точной привязки прогресса анимации к позиции курсора или скролла нет
- Нет редактора с ключевыми кадрами для многоступенчатых последовательностей, где один эффект должен стартовать ровно в момент завершения другого
- При большом числе анимированных элементов на одной странице она может подтормаживать на слабых мобильных устройствах, особенно если анимируются тяжёлые изображения
Когда без кастомного кода анимацию на Тильде не сделать
На практике код нужен, когда бренд-гайд или дизайнер закладывают motion-эффекты, которых нет в стандартном наборе Zero Block. Примеры из моей работы:
Многослойный параллакс с пиннингом секции
Секция закрепляется на экране, пока пользователь прокручивает страницу, а несколько слоёв внутри неё двигаются с разной скоростью и в разное время. Для этого подключаю библиотеку GSAP со ScrollTrigger через код в настройках сайта и таргетирую элементы по кастомным CSS-классам, которые можно назначить прямо в Zero Block без кода - класс вешается через панель настроек элемента, а логику анимации пишу отдельно.
Анимация текста по буквам или словам
Заголовок разлетается на отдельные символы, и каждый появляется со своей задержкой. Текст разбивается скриптом на отдельные span-элементы, дальше анимация каждого куска идёт через JS-таймлайн с нужной последовательностью и паузами между буквами.
SVG-анимация рисования линии по скроллу
Иконка или диаграмма дорисовывается по мере прокрутки - эффект строится на манипуляции с длиной обводки SVG-пути и завязан на позицию скролла, а не на факт появления элемента в кадре.
Кастомный курсор и canvas-эффекты
Частицы на фоне героя, курсор в виде кастомного объекта, реагирующего на движение мыши - такие вещи рисуются на canvas или через отдельный JS-слой поверх верстки Zero Block.
Технически код добавляется двумя способами: точечно, через html-элемент внутри самого блока Zero Block, или сквозным подключением библиотеки и скрипта в настройках сайта, если анимация используется на нескольких страницах сайта.
Zero Block или код: что где включать
| Задача | Zero Block без кода | Нужен кастомный код |
|---|---|---|
| Появление блока при скролле (fade, слайд, zoom) | Есть | - |
| Параллакс фонового изображения | Есть | - |
| Ховер на кнопке или картинке | Есть | - |
| Lottie-анимация: показ, цикл, ховер | Есть | - |
| Бегущая строка | Есть | - |
| Анимация текста по буквам | - | Да |
| Пиннинг секции с многослойным параллаксом | - | Да |
| SVG-рисование линии по прогрессу скролла | - | Да |
| Lottie, реагирующая на курсор или скролл | Ограниченно | Да |
| Кастомная кривая easing под бренд-гайд | - | Да |
Сколько стоит доработка анимации на Тильде
Разброс задач по анимации у меня делится на три уровня.
Точечная правка - поменять тип появления, добавить задержку между элементами, донастроить ховер под нестандартный сценарий, подключить готовый Lottie-файл с нужным триггером - обычно решается кастомным скриптом от 3 000 ₽ и занимает 1-2 дня.
Комплексная анимация - параллакс с пиннингом на GSAP, разбивка текста на буквы с таймлайном, SVG-рисование по скроллу, canvas-эффекты - это уже отдельная интеграция от 40 000 ₽, срок обычно 5-10 дней в зависимости от числа секций.
Если анимация закладывается сразу при сборке нового сайта на Zero Block с нуля, это входит в стоимость сайта на Tilda от 30 000 ₽ - там появление и ховеры я настраиваю по ходу вёрстки блоков, без отдельной сметы.
Для точечных правок обычно достаточно кастомных доработок для Tilda, а не пересборки всего сайта - большинство запросов по анимации у клиентов именно такого масштаба.
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Можно ли сделать анимацию текста по буквам в Zero Block без кода?
Нет, настройки появления в Zero Block работают на уровне элемента целиком, а не по отдельным символам или словам внутри текстового блока. Такой эффект собирается скриптом, который разбивает текст на части и анимирует каждую отдельно с нужной задержкой.
Тормозит ли сложная анимация загрузку сайта на Тильде?
Зависит от веса. Тяжёлые Lottie-файлы и большое количество одновременно анимируемых изображений на одной странице могут заметно просаживать отклик на слабых мобильных устройствах. На практике я оптимизирую вес JSON-анимаций, ограничиваю число одновременных эффектов в области видимости и отключаю тяжёлый параллакс на мобильной версии через кастомный CSS.
Работает ли кастомная JS-анимация в мобильной версии Zero Block?
Да, но её нужно отдельно проверять на брейкпоинтах - мобильная версия блока в Тильде настраивается отдельно от десктопной, и часть эффектов на маленьком экране лучше упростить или отключить, чтобы не сажать производительность.
Сколько стоит добавить анимацию на уже готовый сайт на Тильде?
Точечная правка вроде нового ховера или появления по скроллу стоит от 3 000 ₽ и занимает 1-2 дня. Комплексная анимация с параллаксом, пиннингом секций или разбивкой текста на буквы оценивается от 40 000 ₽ со сроком 5-10 дней.