Движение на сайте: что уместно, а что мешает

Прежде чем что-то анимировать, мы отвечаем, на какой вопрос человека это движение отвечает. Вопросов ровно четыре, и других поводов нет.

• «Что сейчас происходит?» — загрузка, отправка формы, бот печатает ответ. Здесь движение обязательно: без него человек нажимает вторую кнопку, решив, что первая не сработала.
• «Что изменилось?» — открылось окно, появилась цена, раскрылся ответ. Короткий переход показывает связь между нажатием и результатом.
• «Куда смотреть?» — появление блока при прокрутке. Одно появление, а не мигание по кругу.
• «Живой ли это сайт?» — единственный чисто оформительский повод. Отвечает на него фон и первый экран, и никогда — текст, который читают.

Всё остальное движение работает против страницы. Ниже — по приёму на каждый вопрос, живьём.

Блок выезжает снизу один раз, когда доходит до экрана. Не по таймеру: человек прокручивает в своём темпе, и анимация, запущенная по часам, у одного проигрывается до того, как он долистал, а у другого после.

Чем это сделано: IntersectionObserver ставит блоку класс, а дальше работает обычный CSS-переход. Библиотеки для этого не нужны — лишние 30 килобайт ради одного эффекта человек оплачивает своим трафиком.

Самое недооценённое движение на сайте. Кнопка, которая никак не отзывается на нажатие, читается как сломанная — и человек жмёт ещё раз, отправляя вторую заявку.

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

Загрузчик, точки «печатает», точка «на связи». Они крутятся, пока идёт дело, и останавливаются, когда оно кончилось. Это не украшение, а ответ на вопрос «я жду или уже нет».

Каждый запрет здесь куплен на своей ошибке, а не взят из чужой статьи про хороший вкус.

• Бесконечного движения рядом с текстом. Мигающая линия под строкой и полоса, бегущая по карточке, мешают читать и греют телефон всё время, пока человек на странице. Такое движение либо ограничивается числом повторов, либо снимается.
• Анимации всего, кроме transform и opacity. Остальное заставляет браузер пересчитывать разметку каждый кадр: на новом телефоне незаметно, на трёхлетнем — рывками.
• Движения, которое нельзя выключить. При системной настройке «меньше движения» анимации отключаются — для части людей это не вкус, а тошнота и головная боль.
• Заставки на входе. Человек пришёл за ответом, а не смотреть, как разъезжается логотип. Три секунды заставки — это три секунды, за которые закрывают вкладку.
• Чужих готовых наборов вроде shadcn/ui. Они требуют React, Tailwind и сборщик — три вещи, которых в наших сайтах нет намеренно. Приём оттуда взять можно, зависимость — нет.

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

И отдельно — страница просто открывается на телефоне и читается. Замер видит число повторов, а «мешает читать» видит только человек.

Движение входит в работу над сайтом и не считается строкой сверху. Иначе получается торговля воздухом: заказчик платит за «анимации», а какие именно и зачем — решает исполнитель.

Цены на сами сайты: лендинг «Старт» — От 35 000 ₽, сайт-визитка — От 35 000 ₽, лендинг «Продажи» с воронкой и калькулятором — От 65 000 ₽, сайт на 5–10 страниц — От 90 000 ₽. Полный прайс — на странице услуг.

Дороже сайт делает не движение, а количество экранов, расчёты внутри и связки с чужими сервисами. Анимация занимает часы, а не дни, — при условии, что вёрстка уже готова и переделывать её не придётся.