Анимации на сайте: где они помогают продавать, а где только раздражают

Хорошая анимация направляет внимание и помогает понять интерфейс. Плохая — отвлекает и тормозит сайт. Разница — в том, решает ли анимация задачу или просто украшает.

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

• Микро-фидбек на наведение и клик кнопки
• Появление блоков при скролле — показывает структуру
• Прогресс-бары и спиннеры — снимают тревогу ожидания
• Параллакс на hero — создаёт глубину, если не злоупотреблять
• Подсказки в формах — анимация фокуса в поле

Где анимация раздражает

• Полностраничные intro-анимации с обязательным просмотром
• Авто-воспроизведение видео со звуком
• Бесконечные карусели и слайдеры
• Pop-up через 2 секунды после захода
• Текст, который медленно «печатается» построчно

Технический минимум

1. Анимация — не дольше 300–500 мс
2. Использовать transform и opacity, а не layout
3. Учесть prefers-reduced-motion для пользователей с настройкой
4. Тест на слабом смартфоне — должно быть плавно

Главный критерий: уберите анимацию — стало хуже? Если нет — она лишняя.