Анимация на сайте: когда помогает, а когда мешает

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

Где анимация работает на сайт

• Внимание к главному. Движение притягивает взгляд. Если на спокойной странице движется один элемент — кнопка записи, новая цена, подсказка, — его заметят первым. Поэтому движение стоит тратить на то, что действительно важно.
• Понятные переходы. Меню выезжает со стороны кнопки, аккордеон раскрывается плавно, товар «улетает» в корзину — человек видит, откуда что появилось и куда делось, и не теряется.
• Обратная связь. Кнопка откликается на нажатие, во время отправки формы крутится индикатор, после — появляется галочка. Без этого человек не уверен, что всё сработало, и нажимает ещё раз.
• Рассказ о продукте. Сложную вещь — механизм, устройство, состав набора — проще показать по шагам при прокрутке, чем описать абзацем.
• Характер бренда. Одна и та же раскладка с быстрым резким движением и с мягким медленным воспринимается по-разному. Спокойные плавные появления подойдут мебельному магазину, энергичные — спортивному клубу.

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

• Задерживает содержимое. Текст появляется только после эффекта, при быстрой прокрутке человек видит пустые блоки, перед сайтом крутится заставка-прелоадер.
• Отвлекает. Рядом с текстом что-то постоянно движется, карусель листается сама и уводит слайд из-под пальца, эффект за курсором закрывает то, что человек пытается прочитать.
• Укачивает. Сильный параллакс, приближение фона, вращение, подменённая прокрутка с инерцией. У людей с нарушениями вестибулярного аппарата такие эффекты могут вызывать головокружение и тошноту.
• Ломает привычное. Прокрутка, которая меняет скорость или перехватывает колёсико мыши, навигация, которая появляется только после анимации.

Один и тот же эффект может работать в обе стороны — всё решают мера и место:

Эффект	Помогает, когда	Мешает, когда
Появление блоков при прокрутке	Короткое и срабатывает один раз	Долгое, повторяется при каждой прокрутке, прячет текст
Параллакс	Лёгкий сдвиг добавляет глубины	Сильный сдвиг укачивает и дёргается на телефоне
Видео на фоне	Показывает продукт в движении	Тяжёлое, без заставки, мешает читать текст поверх
Микроанимация кнопок и форм	Подтверждает нажатие, отправку, ошибку	Задерживает реакцию на нажатие
Карусель	Листается, когда человек сам этого хочет	Прокручивается сама
Переходы между страницами	Подсказывают, куда перешёл человек	Длятся дольше, чем загрузка
Прелоадер	Почти никогда	Заставляет ждать даже то, что уже загрузилось

Как сделать анимацию лёгкой для браузера

Плавная анимация — это обычно 60 кадров в секунду, то есть около 16 миллисекунд на кадр. Не успевает браузер — движение дёргается. Поэтому важно, что именно анимировать.

• Дёшево: transform — сдвиг, масштаб, поворот — и opacity, прозрачность. Браузер двигает уже отрисованный слой и не пересчитывает страницу.
• Дорого: width, height, top, left, margin — на каждом кадре браузер заново рассчитывает раскладку. Тяжело даются и тени с размытием на больших площадях: их приходится перерисовывать.
• Библиотеки — по делу. Простые эффекты делаются средствами CSS. Библиотеки вроде GSAP нужны для сложных сцен и анимации по прокрутке, а подключать большую библиотеку ради двух эффектов нет смысла.
• Векторные иллюстрации — в формате Lottie вместо GIF или видео: картинка чётче на любом экране, а файл обычно легче. Но для Lottie нужен скрипт-проигрыватель, а перегруженная анимация тоже бывает тяжёлой.
• Проверка на слабом устройстве. На мощном ноутбуке всё летает. Смотрите на телефоне среднего класса или включите замедление процессора на вкладке Performance в инструментах разработчика Chrome.

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

Анимация и доступность: prefers-reduced-motion

В настройках iPhone, Mac, Windows и Android есть пункт, который уменьшает или отключает анимацию. Его включают люди, которых укачивает от движения на экране, и те, кого оно просто утомляет. Сайт узнаёт об этой настройке через медиазапрос prefers-reduced-motion и должен её уважать:

• убрать параллакс, крупные перемещения, вращение и сцены, привязанные к прокрутке;
• остановить автовоспроизведение видео и каруселей;
• заменить выезды и полёты коротким проявлением — или показать всё сразу.

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

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

Анимация в конструкторе и на заказ

В конструкторах анимацию собирают из готовых эффектов. В Zero Block на Tilda есть появление при прокрутке, параллакс, фиксация и пошаговая анимация, у Wix — свой набор эффектов. Многим сайтам этого хватает, и получается быстро.

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

Анимацию стоит согласовать до вёрстки. Статичный макет движения не передаёт, поэтому дизайн, который держится на анимации, лучше показывать прототипом в браузере: в нём видны настоящая скорость и плавность. Разработчику нужны длительности, задержки и характер движения, а не «пусть красиво выезжает».

Как показывать анимированные сайты в портфолио

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

• Записывайте плавно, без рывков, и сжимайте в MP4.
• У каждого видео — кадр-заставка, без звука, по кругу.
• В общем списке проектов — только неподвижные кадры: десяток видео, которые играют одновременно, нагружают и сеть, и процессор.
• Видео запускайте на странице проекта, когда оно появляется на экране.
• Если включено уменьшение движения, показывайте заставку вместо видео.
• Честно подписывайте свою роль: дизайн, вёрстка, анимация.

Так устроено и наше портфолио: в нём примеры анимированных сайтов, которые мы сверстали по макетам заказчиков. В списке — неподвижные кадры, а видео прокрутки играет на странице каждого проекта.

Частые ошибки

• Анимировать всё подряд: когда движется всё, не выделяется ничего.
• Прятать текст до окончания эффекта.
• Ставить прелоадер ради красоты.
• Двигать элементы через width и top вместо transform.
• Проверять анимацию только на мощном компьютере.
• Не учитывать настройку уменьшения движения.
• Проигрывать одну и ту же анимацию заново при каждой прокрутке вверх и вниз.

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