Анимация в Тильде: 6 эффектов, которые стоит оставить, и во что каждый обходится скорости

Какая анимация есть в Тильде

Начнём с карты возможностей, чтобы дальше говорить на одном языке.

Стандартные блоки. В настройках большинства блоков есть эффект появления: элемент проявляется или въезжает сбоку, снизу, с увеличением. Настраивать почти нечего — выбрали эффект, и всё. Для фона некоторых обложек есть параллакс и фиксация.

Zero Block. Здесь у каждого элемента своя анимация. По справке Тильды об анимации в Zero Block есть три слоя:

1. Базовая анимация — появление: Fade In и его варианты со сдвигом, Zoom In. Общие параметры: длительность, задержка и отступ срабатывания.
2. Эффекты — параллакс (по скроллу или по движению мыши) и фиксация элемента на экране.
3. Пошаговая анимация — цепочка шагов, у каждого свои движение, масштаб, прозрачность, поворот и плавность.

Для пошаговой анимации справка перечисляет пять событий запуска: элемент на экране, блок на экране, при скролле, при наведении и при клике. Отдельно есть триггерная анимация: клик или наведение на один элемент запускает движение другого. Тильда пишет прямо, что триггер работает только на наведение и на клик.

Что такое Zero Block и когда он вообще окупается, мы разбирали в статье Zero Block в Тильде. Здесь — только про движение.

6 эффектов: что оставить, а что убрать

Мы смотрим много сайтов на Тильде, которые приносят на разбор. Почти на каждом третьем анимация стоит «потому что можно». Вот шесть эффектов, которые встречаются чаще всего, и наш вердикт по каждому.

Оценки «низкая / средняя / высокая» — наше практическое наблюдение, а не замер Тильды. На вашем сайте всё зависит от веса картинок и числа элементов, поэтому дальше покажем, как проверить самому.

1. Появление стандартных блоков

Самый безобидный эффект. Блок с отзывами мягко проявляется, когда до него доскроллили. Человек не ждёт: контент под первым экраном он всё равно увидит позже.

Подвох один. Если включить появление на всех блоках, страница превращается в слайд-шоу, и при быстром скролле человек видит пустые места, которые «догоняют». На телефоне, где листают быстро, это раздражает. Включайте эффект на 2–3 блоках, где хочется паузы: цены, гарантии, кейс.

2. Параллакс и фиксация фона

Фон движется медленнее текста — выглядит дорого на большом мониторе. На телефоне браузер пересчитывает положение фона на каждом кадре скролла. На недорогом Android это даёт рывки, а большая фоновая картинка, растянутая под параллакс, ещё и весит больше обычной.

Мы почти всегда убираем параллакс на сайтах услуг. Человек пришёл узнать цену ремонта, а не смотреть, как красиво уплывает фото кухни.

3. Появление отдельных элементов в Zero Block

Цифра «12 лет на рынке» проявляется чуть позже фона, стрелка въезжает к кнопке. Работает как указка: глаз идёт туда, где движение. Это единственная анимация, которая, по нашему опыту, помогает читать, а не мешает.

Правило: один-два таких акцента на экран. Если двигается всё, не выделяется ничего.

4. Пошаговая анимация по появлению на экране

Подходит для схем: этапы работы, как устроена услуга, путь заказа. Шаги появляются по очереди, и человек считывает порядок. Цена растёт с числом анимированных элементов: схема из пяти шагов — нормально, схема из тридцати иконок, каждая со своей траекторией, — уже нагрузка.

5. Анимация при скролле

Элемент движется ровно вместе с прокруткой: телефон поворачивается, пока вы листаете, карточки разъезжаются. Это самый эффектный и самый тяжёлый вариант. Скрипт отслеживает каждый пиксель прокрутки, и на слабом телефоне страница начинает «залипать».

Оставляем, только когда движение объясняет продукт: например, показывает, как собирается конструкция. Для красоты — нет.

6. Наведение, клик и триггеры

Карточка услуги приподнимается при наведении, по клику раскрывается подробность. Для скорости это почти бесплатно: анимация запускается только по действию. Но на телефоне наведения нет. Если важная информация появляется только при наведении, мобильный посетитель её не увидит никогда. А на телефоны у сайтов услуг часто приходится большинство трафика — проверьте долю в Метрике.

Почему анимация на первом экране стоит дороже всего

Это главная ловушка, и её мы встречаем чаще остальных. Дизайнер делает так, чтобы заголовок, подзаголовок и кнопка на первом экране красиво появлялись по очереди: заголовок через 0,3 секунды, кнопка через 0,8.

Что получает посетитель: страница загрузилась, а смотреть не на что ещё почти секунду. Для рекламного трафика это заметно — человек пришёл из объявления и решает за первые секунды, остаться или вернуться в выдачу.

Есть и техническая сторона. Метрика LCP в PageSpeed — время, когда отрисовался главный элемент первого экрана. Хорошее значение — до 2,5 секунды. Если главный элемент сначала прозрачный и проявляется с задержкой, он может засчитаться позже, чем отрисовался бы без анимации. Совет простой: первый экран — без появления. Пусть заголовок и кнопка будут на месте сразу. Что вообще должно стоять на первом экране, мы разобрали в статье про первый экран сайта.

Если вы узнали свой сайт — первый экран «танцует», а заявок мало, — проще один раз увидеть, как выглядит тот же экран без лишнего.

Как анимация в Тильде работает на телефоне

По ответу Тильды о мобильной анимации, в мобильной версии Zero Block анимация по умолчанию отключена. Причины Тильда называет сама: на маленьком экране сложную анимацию труднее воспринимать, а мобильные браузеры слабее и анимация может замедлять сайт и снижать конверсию. Включить её можно для отдельного элемента — в мобильной версии Zero Block, в настройках этого элемента.

Отсюда два практических вывода:

• Если на телефоне анимации нет, а вы её не отключали — это нормально. Не нужно просить дизайнера «починить».
• Если анимация на телефоне есть, её включили руками. Спросите, зачем. Хороший ответ звучит как «без неё непонятна схема». Плохой — «так красивее».

Стандартные блоки с эффектом появления на телефоне обычно анимируются. Проверьте сайт со своего телефона и с самого дешёвого, какой найдётся в офисе: разница бывает разительная.

Как вообще проверять мобильную версию на Тильде и где она ломается, мы собрали в статье мобильная версия на Тильде.

Как замерить, сколько анимация стоит скорости

Не верьте на слово ни нам, ни дизайнеру. Замер занимает 20 минут.

1. Откройте PageSpeed Insights, вставьте адрес страницы и смотрите вкладку «Мобильные».
2. Запустите проверку три раза подряд и выпишите средние LCP, общую оценку и TBT — время, пока страница не реагирует на нажатия.
3. Сделайте копию страницы в Тильде и отключите на копии анимацию на первом экране и параллакс. Опубликуйте копию.
4. Прогоните копию тем же способом, три раза.
5. Сравните средние. Разница в LCP и есть цена анимации на первом экране.
6. Откройте обе версии со слабого телефона и пролистайте до конца. Где листается рывками — там тяжёлая анимация при скролле или параллакс.
7. Удалите копию или закройте её от индексации, чтобы в поиске не появился дубль.

Почему по три прогона: результат PageSpeed скачет от запуска к запуску, одна проверка ничего не доказывает. Подробно о метриках и других причинах медленной загрузки — в статье медленный сайт на Тильде.

Условный пример: лендинг до и после

Пример условный, цифры для иллюстрации, не замер конкретного сайта. Студия ремонта ванных, лендинг на Тильде, первый экран в Zero Block.

При 1 000 кликов в месяц это 15 и 22 заявки. Рекламу не трогали, поменяли только то, что двигается и сколько весит. Обратите внимание: половину выигрыша дало сжатие картинки, а не отключение эффекта. Так бывает почти всегда — анимация тянет за собой тяжёлую графику.

Правило «одна анимация на экран»

Мы пришли к простому правилу и держим его на своих проектах: на один экран — не больше одного движения, которое привлекает внимание. Экран — это то, что человек видит без прокрутки, на телефоне и на компьютере.

Почему это работает:

• Движение — указка. Глаз реагирует на то, что двигается. Одно движение ведёт к главному, пять — растаскивают внимание.
• Меньше элементов — меньше нагрузки. Даже лёгкие эффекты складываются.
• Проще править. Каждая анимация в Zero Block настраивается руками, на нескольких ширинах. Через полгода вы захотите поменять текст, и анимированный блок окажется самым дорогим в правке.

Что считаем допустимым на сайте услуг:

Когда анимация продаёт

Чтобы не создалось впечатление, что мы против анимации вообще. Бывают задачи, где движение — часть смысла:

• Сложный продукт. Как собирается каркас дома, как работает система очистки воды. Пошаговая анимация объясняет быстрее трёх абзацев.
• Сравнение «до и после». Шторка, которую двигаешь пальцем, — лучшая демонстрация для ремонта, клининга, детейлинга.
• Продукт, где важна эмоция. Ресторан, ивент, загородный отдых. Здесь лёгкое движение передаёт атмосферу, и посетитель настроен смотреть, а не искать телефон.
• Портфолио дизайнера. Сайт сам по себе демонстрирует навык.

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

Что спросить у дизайнера про анимацию

Если сайт делает подрядчик, задайте пять вопросов до того, как он начнёт рисовать:

1. На каких экранах будет анимация и зачем на каждом?
2. Будет ли анимация на первом экране? Если да — что увидит человек в первую секунду?
3. Включена ли анимация на телефоне и почему?
4. Сколько весят картинки в анимированных блоках?
5. Сделаете ли замер в PageSpeed до и после, на мобильной вкладке?

Если на третий и пятый вопрос ответа нет, анимацию проектируют для портфолио, а не для заявок. Как в целом отличить сильного исполнителя, — в статье как выбрать Тильда-дизайнера.

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