Анимации для лендинга: где уместно и где мешает

Лендинг ведёт клиента по одному сценарию, и анимация может в этом помочь. Но та же анимация способна отвлекать и тормозить страницу. Разница в том, где и как её применять.

Где анимация помогает

• Появление блоков при прокрутке. Взгляд двигается по странице по порядку, и клиент замечает ключевые сообщения.
• Обратная связь на действие. Кнопка отзывается на нажатие, форма показывает отправку. Клиент понимает, что всё работает.
• Акцент на важном. Короткая пульсация у таймера или бейджа обращает внимание на срок и выгоду.
• Переходы между шагами. Если на лендинге несколько этапов, плавная смена помогает не потерять контекст.

Где анимация мешает

• На каждом блоке. Если двигается всё, внимание рассеивается, и клиент перестаёт понимать, куда смотреть.
• В тексте. Подпрыгивающие буквы и мигающие заголовки мешают читать.
• Бесконечные циклы. Постоянное движение раздражает и отвлекает от кнопки.
• Позднее появление. Если блок всплывает, когда клиент уже прокрутил, это выглядит как баг.

Тайминги и задержки

Ориентиры, которые работают на большинстве лендингов:

• длительность появления: 300-600 мс;
• задержка между соседними блоками: 60-120 мс;
• плавность: ease-out для появления.

Короткая задержка создаёт ощущение последовательности. Слишком большая приводит к тому, что клиент прокручивает страницу раньше, чем блок появится.

Влияние на скорость

Анимация не должна быть причиной медленной загрузки. Анимируйте только прозрачность и трансформацию, не трогайте размеры и отступы. Тяжёлые скрипты ради эффекта не нужны: скрипт newUX работает на Web Animations API. Если у клиента включён режим уменьшенного движения, анимацию лучше отключить. О скорости подробнее в статье про Core Web Vitals.

Как настроить

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

Итог

На лендинге анимация помогает, когда направляет внимание и даёт обратную связь. Держите её сдержанной, следите за таймингами и скоростью. Начните с появления блоков и одного акцента.