Анимация при скролле в Тильде - самый частый способ оживить лендинг: текст или картинка не просто стоят на странице, а всплывают или проявляются, когда пользователь долистывает до блока. За несколько лет работы с Тильдой я ставил такие эффекты и на визитки, и на интернет-магазины, и видел, как одна и та же настройка в одном проекте ускоряет восприятие страницы, а в другом - тянет LCP за 3.5 секунды и роняет позиции в поиске. Разберу, как включить анимацию правильно, какие параметры реально важны и на что смотреть, если сайт после добавления эффектов вдруг проседает в Google Search Console.
Как включить анимацию при скролле в Тильде без кода
Анимация появления при скролле в Тильде включается на уровне блока или отдельного элемента, если блок собран на Zero Block. Открываю блок в редакторе, кликаю на нужный элемент - заголовок, картинку, кнопку - и в панели настроек справа перехожу на вкладку с эффектами. Там включаю переключатель «Анимация при скролле» и выбираю тип появления: плавное появление (fade), выезд снизу, сверху, слева или справа, увеличение (zoom) или комбинацию из этих эффектов.
Для блоков, собранных не через Zero Block, а через стандартный конструктор, часть готовых блоков Тильды уже имеет встроенную анимацию - она включается общим переключателем в настройках блока, во вкладке «Ещё» → «Анимация блока». Разница в том, что в Zero Block я управляю анимацией на уровне каждого элемента отдельно, а в обычном блоке - сразу для всей секции целиком, без тонкой настройки по частям. На практике для лендингов с уникальной вёрсткой почти всегда выбираю Zero Block именно из-за этой гибкости.
Виды эффектов появления и когда какой использовать
На практике использую четыре типа эффектов, и у каждого своя роль на странице.
| Эффект | Где применяю | Риск для CLS |
|---|---|---|
| Fade (плавное появление) | Текстовые блоки, абзацы, преимущества | Низкий - элемент не двигается, меняется только прозрачность |
| Slide up / down | Карточки товаров, отзывы, галереи | Средний - при смещении на 40-60 px возможен сдвиг соседних блоков |
| Zoom | Обложки, фото в портфолио | Средний - если элемент крупный и меняет размер контейнера |
| Rotate и комбинированные эффекты | Иконки, декоративные элементы | Высокий при частом использовании на мобильных |
На лендингах услуг обычно ставлю fade на текст и slide up на карточки - это не создаёт рывков при прокрутке и не портит метрику CLS. Rotate и комбинированные эффекты приберегаю для одного-двух акцентных элементов, не больше: если анимировать всё подряд, страница начинает выглядеть дёргано, а это уже влияет не только на SEO, но и на поведенческие факторы - пользователь закрывает вкладку раньше, чем долистает до формы заявки.
Настройка задержки, длительности и триггера прокрутки
У каждого эффекта в Тильде три настраиваемых параметра: задержка (delay), длительность (duration) и точка запуска - процент, на который элемент должен показаться в зоне видимости, прежде чем анимация стартует.
Задержку ставлю в диапазоне 0.1-0.3 секунды для одиночных элементов и добавляю ступенчатую задержку 100-150 миллисекунд между элементами одной группы - карточками в ряд, иконками в блоке преимуществ. Так эффект выглядит волной, а не одновременной вспышкой, и глазу проще считать порядок элементов.
Длительность самой анимации обычно держу в пределах 0.4-0.6 секунды. Дольше - эффект ощущается медленным, особенно на мобильных, где пользователь и так пролистывает страницу быстро. Точку запуска (trigger offset) выставляю на 20-30% высоты экрана - элемент начинает проявляться чуть раньше, чем полностью зайдёт в область видимости, и к моменту, когда пользователь долистал до него, анимация уже завершена, а текст читаемый, а не полупрозрачный.
Кастомные скролл-анимации через код: когда штатных настроек мало
Штатных настроек хватает для большинства лендингов, но если нужен параллакс, анимация по проценту прокрутки (элемент трансформируется пропорционально скроллу, а не просто появляется один раз) или синхронизация нескольких блоков между собой, подключаю кастомный скрипт через код на странице - в футере проекта - на IntersectionObserver или через библиотеку вроде GSAP ScrollTrigger.
Готовые библиотеки против самописного кода
GSAP и похожие библиотеки удобны, когда нужна сложная хореография - несколько элементов синхронно двигаются с разной скоростью относительно скролла. Но это дополнительный вес страницы, обычно 25-40 КБ на подключение библиотеки. Для простых эффектов появления мне хватает нативного IntersectionObserver - он встроен в браузер, ничего не подгружает и срабатывает один раз при пересечении элемента с областью видимости:
const items = document.querySelectorAll('.js-scroll-fade');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
items.forEach((el) => observer.observe(el));Такой подход легче для браузера, чем встроенные Тильдовские анимации на тяжёлых страницах: он не завязан на скролл-события на каждый кадр, а срабатывает один раз на пересечении, и unobserve сразу отключает наблюдение за элементом, снижая нагрузку на мобильных процессорах. Похожие готовые куски я собрал в библиотеке готовых скриптов для Zero Block - там есть варианты и под параллакс, и под ступенчатое появление карточек без лишнего веса на странице.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Как анимация при прокрутке влияет на Core Web Vitals и SEO
Анимация появления сама по себе не наказывается Google, но она напрямую задевает две метрики Core Web Vitals - LCP и CLS, а через них уже влияет на позиции.
Если анимируется главный элемент экрана, обычно это заголовок или крупная картинка в первом блоке, браузер откладывает момент, когда элемент считается отрисованным полностью - LCP замеряется по факту финального рендера. В паре проектов клиентов Тильда с анимацией первого экрана растягивала этот момент до 3.2-3.8 секунды на мобильном вместо 1.8-2 секунд без анимации. PageSpeed Insights считает всё, что дольше 2.5 секунды, плохим показателем, и именно эта цифра чаще всего тянет вниз общую оценку страницы.
CLS страдает, когда элемент во время анимации меняет геометрию - сдвигается или увеличивается - и толкает соседние блоки. На эффекте slide на 60 px с крупной картинкой я видел скачок CLS с 0.03 до 0.14 - это уже за порогом 0.1, который Google считает приемлемым для хорошего опыта.
Второй момент - индексация текста. Если элемент до срабатывания анимации спрятан через opacity: 0, а не через display: none, поисковый робот при рендеринге страницы обычно всё равно видит текст, потому что выполняет JS и ждёт события скролла в эмулированном viewport. Но на практике я всё равно не прячу через display: none текст, важный для индексации - заголовки h2-h3 и ключевые абзацы - только через прозрачность и лёгкий сдвиг, чтобы не рисковать тем, что краулер отрендерит страницу раньше срабатывания анимации и не увидит контент в снапшоте.
Проверка и оптимизация анимации перед публикацией
Перед публикацией страницы с анимацией прогоняю её через три проверки.
- Google PageSpeed Insights или вкладка Lighthouse в Chrome DevTools - смотрю на LCP, CLS и Total Blocking Time именно в мобильном отчёте, он обычно хуже десктопного в 1.5-2 раза.
- Вкладка Performance в DevTools с записью скролла страницы - если во время прокрутки FPS проседает ниже 50, анимаций слишком много одновременно или используется тяжёлый эффект вроде blur или анимированной тени на большом количестве элементов.
- Ручная проверка на реальном среднем Android-телефоне, не на симуляторе - треть моих кейсов с жалобами на подтормаживающую анимацию были именно на бюджетных Android, где симулятор в DevTools показывал терпимые цифры, а живое устройство - рывки.
Если после проверки метрики не укладываются в норму, обычно достаточно убрать анимацию с двух-трёх самых тяжёлых блоков - чаще всего это галереи с большим числом фото - и оставить эффекты там, где они реально работают на восприятие: на первом экране (аккуратно, без задержки LCP) и на блоке с преимуществами или отзывами.
Когда стандартных блоков не хватает
Кастомный скрипт
от 3 000 ₽
Подробнее →Частые вопросы
Замедляет ли анимация при скролле загрузку сайта на Тильде?
Сама по себе анимация не грузит страницу дольше - это CSS-трансформации и небольшой JS-обработчик. Проблема возникает, если анимаций слишком много на одном экране или они завязаны на тяжёлые эффекты вроде blur и анимированной тени, которые браузер пересчитывает на каждый кадр скролла. На обычном лендинге с 15-20 анимированными элементами разницы в скорости загрузки почти нет.
Можно ли настроить анимацию только для десктопа, без мобильной версии?
В Zero Block можно отключить анимацию отдельно для мобильной версии - в настройках элемента есть отдельная вкладка мобильной адаптации с собственным тумблером эффекта. Я так делаю почти всегда, потому что на маленьком экране пользователь и так быстро скроллит, и анимация чаще мешает считывать текст, чем помогает.
Влияет ли анимация появления на индексацию текста в Google и Яндексе?
Если текст скрыт через прозрачность, а не через display: none, оба поисковика при рендеринге страницы его видят и обычно нормально засчитывают. Проблемы встречал только в проектах с кастомным скриптом, где из-за ошибки в коде элемент оставался с нулевой прозрачностью при несработавшем наблюдателе - текст физически был в DOM, но визуально и в некоторых снапшотах выглядел пустым.
Сколько стоит доработать анимацию скролла в Тильде под нестандартный эффект?
Точечная доработка - свой эффект появления, синхронизация нескольких блоков, лёгкий параллакс - обычно стоит от 3 000 ₽, если это правки существующего кода блока. Комплексная анимация с расчётом под все блоки лендинга и оптимизацией под Core Web Vitals - от 40 000 ₽, в зависимости от количества блоков и глубины кастомизации.