Анимация на сайте: когда уместна и как реализовать

Анимация как инструмент UX

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

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

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

Обратная связь

Пользователь нажал кнопку — она отреагировала (изменила цвет, сжалась). Форма отправлена — появился зелёная галочка. Ошибка — поле покраснело и качнулось. Это микровзаимодействия, которые подтверждают действие.

Переходы

Модальное окно не появляется резко — оно плавно выезжает. Аккордеон не прыгает — он раскрывается. Плавные переходы помогают мозгу отследить, что изменилось на экране.

Привлечение внимания

Появление элементов при прокрутке (scroll-triggered animations) фокусирует внимание на важном. CTA-кнопка, которая мягко появляется, заметнее статичной. Но только если анимация одна на экран, а не десять.

Объяснение

Анимированные схемы, графики, процессы. Показать, как работает продукт, за 5 секунд анимации эффективнее, чем за 500 слов текста.

Когда анимация вредит

• Замедляет загрузку — тяжёлые Lottie-файлы или видеофоны по 5 МБ
• Отвлекает от контента — параллакс-фоны, летающие элементы
• Вызывает дискомфорт — быстрые мигания, вращение, тряска. У 35% людей это провоцирует укачивание
• Задерживает доступ к информации — анимация загрузки на 3 секунды при каждом клике
• Не отключается — нет respect для prefers-reduced-motion

Технологии анимации для веба

CSS-анимации

Transition и @keyframes. Самый быстрый и лёгкий способ. Подходит для hover-эффектов, появлений, простых переходов. Нулевой вес, аппаратное ускорение, работает везде.

JavaScript-библиотеки

• GSAP — золотой стандарт веб-анимации. Мощный, но платный для коммерции. Scroll-trigger, timeline, морфинг
• Framer Motion — для React-проектов. Декларативный синтаксис, жесты
• Motion One — лёгкая альтернатива GSAP (3.8 КБ). Использует Web Animations API

Lottie

Анимации из After Effects в формате JSON. Векторные, лёгкие (10–50 КБ), воспроизводятся через lottie-web. Идеальны для иллюстраций и loader-ов.

Scroll-triggered анимации

Появление элементов при прокрутке. CSS Scroll-Driven Animations (новый стандарт), Intersection Observer API, или библиотеки (AOS, ScrollReveal). Используйте умеренно — не каждый элемент должен «влетать».

Правила хорошей анимации

• Длительность: 200–500 мс для интерфейсных элементов. Больше 1 секунды — только для сложных переходов
• Easing: ease-out для появлений, ease-in для исчезновений, ease-in-out для перемещений. Никогда linear
• Цель: анимация должна что-то объяснять или подтверждать. «Зачем эта анимация?» — если нет ответа, уберите
• prefers-reduced-motion: уважайте системную настройку пользователей, которые отключили анимации
• Производительность: анимируйте только transform и opacity — они не вызывают перерисовку

Анимация и адаптивный дизайн

На мобильных устройствах анимации должны быть проще или вовсе отключены. Причины: слабые процессоры, экономия батареи, маленький экран (параллакс бессмыслен). Используйте @media (hover: hover) для hover-эффектов — на тачскринах их нет.

Если вы хотите добавить анимации на свой сайт или улучшить существующие — обратитесь к нам. Мы реализуем анимации, которые ускоряют, а не замедляют.