Гайд по веб‑анимации:
как сделать сайт эффектным
и удобным — виды анимаций
на сайте, способы реализации, принципы использования

В статье речь пойдёт не о видосиках и гифках, а именно об анимированных объектах и эффектах на сайте, которые могут улучшить взаимодействие с интерфейсом и сделать его, с одной стороны, привлекательнее, с другой — удобнее.
На странице содержится много анимации, видео и графики, а также интерактивных элементов, поэтому настоятельно рекомендуем изучать статью с десктопа
Пользователям нравится, когда на сайте есть WOW-эффекты: нестандартные появления, вращения, деформации. Всё это делает сайт объёмнее, живее, атмосфернее. Анимация нужна не только ради красоты: она «затягивает» пользователя в интерфейс, ему становится интересно взаимодействовать с сайтом. Это улучшает поведенческий фактор, увеличивает время пребывания пользователя на сайте. В данной статье под интерфейсом имеются в виду не только сайты, а все диджитал-продукты: приложения, онлайн сервисы, личные кабинеты, платформы.

Посмотрите сайт Apple: при прокрутке лендосов с продуктом, мы обязательно встретим плавное появление текстов, поворот продукта по мере скролла, вставки видео, gif-объектов. Сайт становится интересным: это уже не просто продающий лендинг, который качает только контентом, а визуальный сторителлинг, который за счёт анимации погружает пользователя в продукт и продаёт идею.

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

Что такое анимация

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

Роль и задачи анимации в веб‑дизайне

Подробно мы рассказывали о задачах анимации в статье «Нужна ли сайту анимация». Пробежимся кратко по основным пунктам.

Расстановка акцентов

Одна из задач анимации — расстановка акцентов. Это привлечение внимания пользователя к важным деталям на странице, например:
Выделение объектов с помощью движения
01
project one
project three
project two
Привлечение внимания к кнопке за счёт подёргивания
02
button
Привлечение внимания к тексту за счёт нестандартного появления, смены цвета или размеров.
03
Благодаря акциденции с помощью анимации, пользователя удаётся вести по важным точкам на сайте, чтобы сподвигнуть его к выполнению целевого действия — конверсии

Навигация

Анимация используется для упрощения навигации. Например, всплывающие подсказки: по мере изучения сайта, контента, статьи, в нижнем правом углу высвечивается какая-то подсказка. Если мы посмотрим Youtube, появление подсказок на видео — это та же анимация: когда спикер на видео говорит «Сейчас у вас появится ссылка на нужный ролик» и, действительно, появляется ссылка. Хоть подсказки на Youtube настраиваются автором видео, это тоже анимация в интерфейсе, которая улучшает навигацию и глубину просмотра проекта.
Давайте представим, что вы оборудуете офисы, переговорные, залы и так далее: от мебели до техники. Это сотни товарных позиций. Причём не всегда очевидно: что, куда, для какого помещения, и в каких случаях нужно. Можно отметить «кому надо — тот найдёт и купит», — ок, а как быть с теми, кто ещё не в курсе, что ему это надо =). Можно сделать каталог с удобной фильтрацией, но продать через каталог товар, за которым пользователь не приходил — скорее случайность. Что если сделать виртуальную комнату, наполненную вашей продукцией. Пусть в ней каждый объект будет кликабелен и ведёт на товар или раздел каталога. Пользователь сможет пройти по помещению, посмотреть этот объект почти вживую, разобраться, зачем он нужен и даже представить, куда он у себя в офисе всё это поставит. Звучит круто и не совсем реально?

Цените пример:
На сайтах навигационную роль могут выполнять разные элементы — от меню, до изображений, разбитых на отдельные слои и даже целых виртуальных сцен
Виртуальная презентация товаров Panasonic
Если рассматривать более простые примеры, то, как правило, навигационная анимация касается меню. Например, дроп-дауны, селекты, выпадающие списки, раскрывающиеся фильтры, сложные многоуровневые меню. Представьте многоуровневое меню с кучей разделов, категорий и списком по 20 пунктов в каждой из этих категорий, которое открыто сразу. Легко бы вам было найти нужный пункт в газете на ватмане? Вот это примерно то же самое.

Ориентироваться в таком блоке, если бы он целиком выпал на экран, было бы чудовищно. Но за счёт пошаговости, скрытия определённых объектов в этом меню, мы управляем вниманием пользователя. Не рассеиваем на 100 500 элементов, а фокусируем на определённых нужных ему категориях, и дальше, по мере перехода в нужную категорию, открываются более глубокие подкатегории с помощью анимации.

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

Удобство интерфейса

Представьте, что дизайнер отрисовал форму заявки, а верстальщик сверстал её. Эта форма будет непонятна пользователю, потому что нужно настроить анимацию исчезновения плейсхолдера, анимацию отметки о том, что поле заполнено правильно либо неправильно. Всё это делается через анимацию состояния. В этом сильно помогают дизайн-системы.
Пример: человек отправляет данные на сервер — прикладывает файлы, загружает пост. Как ему узнать, что он всё успешно сделал и сервер принял его пост? Для этого используется эффект загрузки на кнопках: кнопка меняет своё состояние на неактивное, в ней появляется текст «Загрузка данных» или просто «три точечки бегают».
Идея в том, что без анимации, которая говорила бы пользователю: куда он двигается, что делает, на что наводится, чего ожидать, правильно ли ввёл данные, — взаимодействие с интерфейсом стало бы титанически трудным. Только за счёт этих анимаций пользователь вообще понимает, что происходит на сайте. Если анимацию убрать, никто не сможет даже заявку отправить, потому что не поймут, а правильно ли заполнили форму. Или догадаются, что неправильно, но исправить не смогут, потому что текст ошибки не появится без анимации. Всё это делается с помощью функциональной анимации (анимации состояния).

Всё это влияет на восприятие.

Ещё одна задача — эмоции и настроение. Анимация задаёт их за счёт нескольких факторов:

  • что анимировано,
  • как анимировано,
  • с какой скоростью анимировано.

Эмоции и настроение

Работа студентки курса PRO Web, Веры Ганенко
Например, на лонгриде (большая креативно оформленная статья) анимация появления изображений, текста, контента — плавная, равномерная, способствует изучению материалов в определённом темпе, и более приятному и последовательному восприятию большого объема информации.
Анимация сборки продукта. Сделано в Dog Studio
На продающем лендинге — эффект крутости и впечатления о продукте можно создать анимацией сборки этого продукта. Например, пользователь, по мере прокрутки страницы и изучения материала, видит, как посередине экрана постепенно собирается байк. Сначала рассказывается о двигателе — собирается двигатель, начинается рассказ о корпусе — к этому двигателю подетально подтягиваются части корпуса.

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

Виды анимации по назначению

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

Функциональная анимация

Функциональная — анимация взаимодействия пользователя с объектами интерфейса. Например, открытие pop-up окон, получение уведомления об отправке заявки, эффекты наведения на кнопки, раскрывание списков, смена состояния иконок, смена внешнего вида курсора при наведении на объекты или при drag-and-drop.

Задача функциональной анимации — помочь пользователю отличить нефункциональные объекты, например, фоновые, от функциональных элементов, с которыми он может как-то взаимодействовать. Другими словами эта анимация отражает реакцию интерфейса на поведение пользователей, даёт им своего рода подсказки: «что произойдёт, если нажать сюда».

Эстетическая анимация

Интенсив по Spline 3D или Blender
Отвечает за красоту, марафет, эмоции. Её задача — погрузить пользователя в проект, сделать сайт живее, динамичнее, интереснее.
SURFN. Проект WebValley Studio

Типы анимации по охвату

Исходя из масштабности, анимацию делят на частную и глобальную.

Частная анимация на сайте

К частной анимации относятся эффекты, применяемые к конкретным объектам. Такая анимация не используется на всём сайте. Например, анимирование в обложке страницы какой-нибудь вращающейся финтифлюшки.
Обложка сайта kanarys

Глобальная анимация на сайте

Глобальная — это анимация, которая используется на всём сайте. Например, эффекты появления всех текстовых или графических элементов, переходы между страницами или блоками, прелоадеры.
Чтобы выбрать веб-студию — изучите сайт и портфолио. Сам сайт уже презентует компанию и их мышление.
Как выбрать веб‑студию?
Мы рассказываем о себе честно и открыто, почитайте о WebValley Studio
пример

Виды анимации в зависимости от последовательности

Исходя из того, в какой последовательности проигрывается анимация, её делят на следующие группы:

Параллельная анимация

Анимация бывает параллельная, когда несколько объектов одновременно анимируются на экране и одновременно проигрываются. У них могут быть разные движения, но одинаковая скорость, одинаковое время воспроизведения. Всё вместе начинает выглядеть, как один большой анимированный объект.

Анимация с задержкой

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

К тому же, это позволяет управлять вниманием более точно, потому что мы показываем, грубо говоря, по одному объекту.

Групповая анимация

Групповая анимация настраивается не для каждого объекта, а для группы в целом. Самый частый пример использования групповой анимации: при прокрутке сайта на Tilda из стандартных блоков новые секции появляются на экране из прозрачности. Это и есть групповая анимация. То есть весь блок с его содержимым — это группа. И к этой группе применён эффект появления, не к каждому объекту, а ко всему блоку целиком.
# ОТ ОБЩЕГО К ЧАСТНОМУ
# ОТ ОБЩЕГО К ЧАСТНОМУ

Классификация анимации по объектам, к которым она применяется

Виды анимации можно классифицировать по объектам, с которыми происходит взаимодействие.

Анимация интерфейсов

Функциональная анимация интерфейсов касается инпутов, элементов навигации, секций, меню, появления уведомлений, pop-up окон, поведения блоков (например, FAQ — анимация по клику, открытие списков, закрытие)
пример навигации в меню
X-Merch. Проект WebValley Studio

Анимация текста

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

  • побуквенно (эффект печатной машинки),
  • из невидимости,
  • появление снизу вверх или слева направо,
  • с искажением или поворотом.
Сайт Coinflect
Сайт дизайнера интерьеров Ирины Марковской

Анимация фоновых объектов

Например, пользователь кликает на круглую кнопку, круг растягивается на весь экран и появляется белый текст. Это интерактивная анимация фонового объекта, предполагающая взаимодействие с интерфейсом.
Фоновые объекты — декоративные фигуры, плашки, которые появляются по мере прокрутки на сайте, чтобы сделать текст читаемым, либо усилить внимание пользователя на каком-то объекте. Анимация проигрывается по мере скролла, либо с помощью кнопок типа «Нажми на меня».
Жми пример
Например, пользователь кликает на круглую кнопку, круг растягивается на весь экран и появляется белый текст. Это интерактивная анимация фонового объекта, предполагающая взаимодействие с интерфейсом.
Фоновые объекты — декоративные фигуры, плашки, которые появляются по мере прокрутки на сайте, чтобы сделать текст читаемым, либо усилить внимание пользователя на каком-то объекте. Анимация проигрывается по мере скролла, либо с помощью кнопок типа «Нажми на меня».

Анимация фоновых объектов

Иногда фоновые объекты анимируются и без взаимодействия с интерфейсом, просто по мере скролла.

Анимация фона

К анимации бэкграундов и фоновых паттернов относятся: шум, глитч эффекты, параллакс эффекты, различные искажения.
Чаще всего для анимации фона используется простая анимация движения объектов по фону, возможно зацикленная анимация, либо видео.
Если же речь идёт о сложных технологиях, используют JavaScript анимацию, WebGL, Three.js — как правило, это уже про трехмерные сцены.
Сайт Aeximius
ВИК. Проект WebValley Studio

Анимация изображений

Анимация изображений бывает, условно, 4-х типов:
Появление / исчезание
01
Появление из невидимости по скроллу и уход со страницы по мере прокрутки, (появление / исчезание объекта с экрана).
ВИК. Проект WebValley Studio
Эффекты интерактивности
02
Например, при наведении на карточку товара в ней меняется картинка или её форма.
Сайт Graphichunters
Более сложный пример — анимированный эффект перехода от одного изображения к другому. Пользователь наводится на изображение, после чего показывается другая картинка с эффектом искажения (превращение).
Эффекты движения
03
Эффекты движения на изображениях: сама картинка может быть анимирована. Например, изображение может вращаться, либо анимируются отдельные объекты на этом изображении. Это добавляет динамики проекту, делает его более энергичным.
Сайт компьютерной игры God of War Ragnarok от Playstation
Стоп-моушн
04
Идея в том, чтобы оживить изображение. Это напоминает мультипликацию: анимация создаётся за счёт нескольких изображений, на которых происходит действие.
Например, человек входит в комнату, и сделано 5 фотографий — очень быстрых, с минимальными изменениями положения, за счёт чего появляется эффект небольшого движения фотографий. Это задаёт динамику и привлекает внимание пользователя, потому что такие эффекты редко ожидаешь увидеть на сайтах. Этого возможно достичь, но нужен фотограф, который отснимет статичную панораму с движущимся объектом. Дальше идёт склейка этих фотографий — очень быстрая замена одной на другую, за счёт этого создается эффект видеоролика или анимации движения.
Amazon Kindle Commercial 3
Стоп-моушн может использоваться и другим образом — в качестве проигрывания анимации по скроллу. Представьте себе каплю, падающую в воду и сайт, посвящённый родниковой воде. Можно снять видеоролик с этой каплей, а затем сделать его раскадровку. И далее по мере скролла быстро сменять изображения, достигая очень классной анимации.
Сделали пример для наглядности

Анимация курсора

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

Анимация встроенная в объекты

С помощью javascript, видеороликов либо gif анимация встраивается в объекты или в фон. Например, видеоролик встраивается в какой-нибудь заголовок.

Прелоадеры и эффекты режима ожидания загрузки

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

Режим ожидания загрузки контента — это анимация элементов дизайна, которые ожидают загрузки. Например, если зайти в социальную сеть со слабым интернетом, скорей всего, мы увидим, что вместо постов появляется svg-картинка, состоящая из точек, расположенных по кругу, которые вращаются и переливаются. Когда мы загружаем компьютер, первое что видим при загрузке Windows — анимацию режима загрузки с мигающим логотипом компании. Сюда же относится строка состояния, показывающая цветом с процентами, сколько уже загрузилось.

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

Слайдеры и карусели

Интерактивные объекты из нескольких секций или блоков в одном. Слайдеры (карусели) позволяют сократить занимаемое контентом пространство, уменьшить количество скроллов, либо скрыть от пользователя не самую важную информацию. С помощью слайдеров можно удобно и пошагово перечислить важный материал. Здесь особо значима интерактивная анимация, анимация взаимодействия с интерфейсом, функциональная: эффекты прокрутки этих слайдеров, переход от слайда к слайду, отражение статуса, на каком слайде пользователь …
В отличии от карусели, слайдер представляет собой картинку по центру, а когда мы кликаем на кнопки влево-вправо — картинка меняется пошагово. Слайдер может быть схож с каруселью: у нас есть ряд картинок, и мы видим, что по границе и ещё парочка картинок уходят в прозрачность, но есть стрелки — управляющие элементы. То есть в этом слайдере мы видим сразу несколько слайдов, но главный принцип: слайдер — пошаговая история, где пользователь переходит от одного блока контента к другому.
Карусель — более сложный анимированный объект, зачастую, без всякой пошаговости. То есть это больше какой-то сайдбар, который мы скроллим справа налево, зажимаем и тащим мышкой.
Сложный пример: 3-х мерная карусель изображений
Простой пример: горизонтальная карусель изображений
Слайдеры, карусели — всё это анимированные объекты. Зачастую анимируются с помощью готовых библиотек (например, самая самая Swiper Slider), но, так или иначе, это не статичный набор контента, а именно анимация. С точки зрения кода и разработки, слайдеры — тот же набор блоков и секций, в которых ничего никуда не меняется и не исчезает. Но на каждом шаге, при клике, происходит смена состояния: одна секция становится видимой, другая — невидимой; и всё это происходит с некоторой плавностью. В этом и заключается анимация слайдера.
# БОЛЬШЕ ЖИРУ # БОЛЬШЕ АНИМАЦИЙ
# БОЛЬШЕ ЖИРУ # БОЛЬШЕ АНИМАЦИЙ

Виды анимации по типам эффектов

Анимацию можно разделить по типу того, что происходит на экране.

Анимация появления и исчезания — Fade in / Fade out

Анимация fade in / fade out — это эффект появления / исчезания объекта из прозрачности, в том числе, с разных сторон, с дополнительными эффектами, с деформацией, искажением. Все эти эффекты, в сумме с остальными, задают ритм и создают общий WOW-эффект.

Достичь WOW-эффекта в ощущениях и эмоциях от сайта, используя одну конкретную анимацию, хоть она будет 3-х мерная, с мега вращениями — невозможно. Всё должно работать в комплексе: все объекты должны быть грамотно и адекватно анимированы. Например, в данной статье тоже используется анимация, а появление текста, который вы читаете, сделано через fade in.

История про появление и исчезание, как правило, не про функционал, а про эстетику и восприятие проекта. Хотя такая анимация может быть привязана к функциональной части, типа плавное появление и исчезание pop-up окон.

Анимация по наведению — Hover

Эффекты наведения (ховеры, hover) используются на стандартных интерактивных объектах, как: кнопки, поля форм, иконки закрытия / открытия и т. д. Но могут применяться и в более глобальных вещах: карточки магазина, посты… То есть чаще используются не в эстетике, а в функциональной части.

Анимация фиксации

Используется как с функциональной, так и с эстетической целью.
Например, эффект залипания объекта, иллюстрации. Либо на сайтах со сложной анимацией, для фиксации бэкграунда или 3D сцены. Такой пример был выше с падающей каплей воды по скроллу.
С эстетической
Для закрепления определённых объектов интерфейса. Например, фиксации кнопок, блоков, формы заявки, форм подписки в нижней части экрана, баннера с акцией или спецпредложением. Но самая распространённая функциональная анимация фиксации — фиксация меню. Насколько хорошо или плохо фиксировать меню на сайте — дискуссионный вопрос, но, если оно не в пол-экрана, то ничего плохого в этом нет.
С функциональной

Анимация сборки

Представим, что некий товар разобран на части и сильно декомпозирован. По мере скролла и рассказа об этом продукте, конструкция товара собирается во что-то единое. Это один из самых интересных способов продемонстрировать продукт на лендинге в формате сторителлинга. Те же Apple периодически прибегают к этому методу: по мере скролла идёт рассказ о комплектующих; системный блок собирается из компонентов, показывается, что куда вставляется; затем собирается готовый ноут или комп. Это круто! Погружает в продукт и привлекает внимание, плюс, сопряжено с хорошим повествованием.
Классный понятный пример: сборка костюма по скроллу, сначала рубашка, к ней добавляются брюки, затем пиджак, сверху пальто — и вот собран готовый полный образ

Цикличная анимация

Суть циклической анимации в постоянном её повторе. Анимация доходит до конца установленного тайминга и начинается сначала. Допустим, движение объекта на 360 градусов в течение 6 секунд — это один цикл. Следующий цикл — снова вращение с 0 до 360 градусов.

Цикл может быть непрерывным: выходить из точки А, проходить какое-то состояние и возвращаться в точку А. А может быть прерывистым, когда у объекта есть точка, А и точка Б. Он приходит из, А в Б, а потом резко восстанавливает состояние в точке, А (ну, а ещё может быть реверсивное, цикличное реверсивное и т. д.). Более того, при циклической анимации объект может проходить множество промежуточных точек. Идея в том, что цикл подразумевает некоторое постоянство действия анимации и возвращения объекта к исходному состоянию.

Используется для расстановки акцентов, либо для задания динамики:
Расстановка акцентов. Например, цикличная анимация на кнопке: есть кликабельный элемент и вокруг него вращается текст «Нажми меня».
В декоративных целях, для передачи движения. Обычно используется с иллюстрациями, например, множество слоёв некой иллюстрации анимированы независимо друг от друга. Например, дерево, у него может быть слой ствола, куча слоёв веток и листиков. Мы можем анимировать каждый объект. Ствол немножко качается — раз цикличная анимация. Ветки покачиваются вверх-вниз — два цикличная анимация. Листики шевелятся — три цикличная анимация.
button

Пульсация

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

Анимация перемещения объектов по скроллу

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

Анимации трансформации (искажения)

Как правило, сопряжены с другими типами анимации. Зачастую это ховер анимация. Например, когда мы наводимся на какую-то карточку товара, то она искажается в пространстве, деформируется.

Дисторшн-эффект

Малоприменим, но всегда выглядит круто и эффектно. Это искажение не форм и размеров объекта, а его вида. Переход из одного состояния в другое через некое разрушение объекта.

Параллакс анимация

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

Триггерная или зависимая анимация

Это анимация взаимодействия сразу с несколькими объектами. Когда взаимодействуешь с одним объектом, то свои состояния меняют другие объекты.

Например, у нас есть сплит-экраны. При наведении на конкретный сплит-экран, анимация происходит не только с ним, а со всем экраном целиком, меняется фоновое изображение под всеми сплит-экранами. Как правило, зависимая анимация работает по ховеру.
пример плавающих сплит-экранов
AI-model — зависимая анимация изображений и других объектов по наведению на область просмотра

Трёхмерная анимация

Самая сложная анимация для действительно крутых промо-проектов. Она вызывает трудности на всех этапах реализации: её нужно продумать, отрисовать, подготовить… Всё возможно, но воссоздать такую анимацию на сайте не видосом, а именно кодом, действительно крайне сложно. 3D анимация — это тренд будущего, рано или поздно к этому придут, гипотетически, все промо-лендосы будут создаваться с ней. Потому что: слишком клёво, интересно, красиво, не просто объём и движение на сайте, а настоящее оживление. Уже не погружаешься в сайт и атмосферу, а попадаешь в некий кинофильм или игру и начинаешь взаимодействовать с ней.
Великолепная 3D анимация по скроллу на сайте компании Dala
Этот тип анимации бесконечно разнообразен, его невозможно как-то классифицировать. Частые примеры — анимация точечных объектов: элемент состоит из множества точек, треугольничков, деталечек, и, по мере скролла, он вращается, превращается в другой объект, потом снова в другой объект (как выше). Это могут быть трехмерные анимации каких-то более реалистичных объектов:
Трехмерная анимация реалистичных объектов по скроллу
Зачастую, вся трехмерная анимация сопряжена с фоном: она офигенно смотрится, когда это бэкграунд, на котором что-то происходит. За счёт этого достигается прям полноценная сцена, ощущение кинофильма либо игры. С другой стороны, трёхмерная анимация может использоваться для необычных эффектов слайдеров, каруселей.
Кайфецкий анимированный слайдер с 3D для демонстрации продукта
# ТЕХНОЛОГИИ # НЕМНОГО ПОНУДИМ
# ТЕХНОЛОГИИ # НЕМНОГО ПОНУДИМ

Классификация анимации по способу создания

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

CSS анимация

Анимация на чистом CSS (Pure CSS Animation) — работа с каскадными таблицами стилей, классами и свойствами. Это самый распространённый и простой способ анимировать объект на странице. CSS анимацию можно увидеть на любом сайте, например: изменение состояния кнопок или карточек при наведении курсора. CSS анимация применяется, чтобы вращать, растягивать, изменять размеры объекта, перемещать его, применять эффекты наведения. Создаётся несколькими способами:
С помощью классов
01
Объекту на сайте (какому-то html-элементу) добавляется класс с другими стилями, затем создаётся правило перехода от одного класса к другому. От одних свойств — к другим. Таким образом, получается анимация. Например, есть класс у кнопки button__color_red: у нее красный цвет. А в состоянии наведения мы хотим синий цвет, значит для класса при наведении button__color_red:hover мы зададим синий.

Чтобы кнопка не моргала, нам нужно задать плавность анимации. Для этого используется CSS свойство transition. Оно устанавливает длительность анимации и плавность переходов для конкретного свойства или всех сразу. Например, transition: color .3s ease означает плавную смену цвета текста за 0,3 секунды.

Подводя итоги, есть начальный класс — базовое состояние, дефолтное. Есть дополнительный класс — по наведению, а плюсом к ним ещё свойство, которое определяет: что меняется, с какой длительностью, насколько плавно.
При помощи специального свойства animation
02
У него есть набор параметров: название анимации, направление анимации, состояние элемента до и после анимации и т. д. Подходит для более сложных видов анимации, когда несколько состояний сменяют друг друга, задания цикличности или же когда много действий в процессе происходит: объект поворачивается, двигается вправо и т. д.
При помощи специального свойства transform-style preserve-3d
03
Благодаря этому свойству трансформации, объект можно вращать и перемещать в 3-х плоскостях. Подходит для анимации чего-угодно в трёхмерном пространстве, например, поворот карточки вокруг вертикальной оси на 360 градусов при наведении.
Преимуществом CSS-анимаций является их простота, причём на таком уровне, что неподготовленный новичок, умеющий работать разве что с конструктором сайтов, вполне осилит классный эффект без навыков фронтендера (разработки). Так, на курсе PRO Web мы намеренно на примерах обучаем базе HTML и CSS, чтобы наши выпускники могли модифицировать возможности Tilda на свой вкус.

Но, зачастую, для создания CSS анимации используется JavaScript. Дело в том, что CSS анимация происходит либо при загрузке страницы, либо при каком-то условии. Для случаев, когда CSS анимация должна сработать не при наведении, а при каком-то действии (например, по клику) уже нужно использовать JavaScript. JS помогает указать браузеру, в какой момент надо проиграть анимацию, при каком условии.

Пример для понимания: есть pop-up окно с формой заявки, оно изначально невидимо. Невидимость задаётся с помощью CSS (например: .pop-up {display: none}). Когда мы нажмём на кнопку, pop-up окно откроется, но оно не мгновенно вылетит, а появится из прозрачности. Вот этот эффект появления и такого же ухода с экрана по закрытии, делается с помощью CSS. Но браузеру нужно понимать: в какой момент должна сработать данная анимация? Браузер не знает, что она должна сработать, когда нажмём на кнопку «Открыть pop-up». Для этого используется JS, который скажет браузеру: «по клику на кнопку открыть, добавь класс нашему pop-up, описывающий видимое (активное) состояние. И браузер по клику добавит то, что указали в JS, например, класс .pop-up_active со свойством display: block.

SVG анимация

Имеется в виду не анимирование SVG-картинок, а именно специальные технологии анимации вектора. SVG — это тег в html, который задаёт векторное изображение. Векторное изображение — не просто какая-то картинка или иллюстрация, а набор координат, векторов, правил… Если простым языком — это набор линий и точек, которые заполняются по каким-то правилам. Каждый раз, когда мы подгружаем SVG-картинку, мы получаем этот самый набор точек, а не растровое изображение в пикселях. Именно поэтому SVG-изображения масштабируются до бесконечности в меньшую и большую стороны без потери качества — там нет пикселей. Смотрите:
На самом деле не картинка, а:

<?xml version="1.0" ?>

<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 32 32" id="svg5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">

<defs id="defs2"/>

<g id="layer1" transform="translate(-252,-244)">

<path d="m 261,268.00586 c -1.64501,0 -3,1.35499 -3,3 0,1.64501 1.35499,3 3,3 1.64501,0 3,-1.35499 3,-3 0,-1.64501 -1.35499,-3 -3,-3 z m 0,2 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z" id="circle1799" style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none"/>

<path d="m 275,268.00586 c -1.64501,0 -3,1.35499 -3,3 0,1.64501 1.35499,3 3,3 1.64501,0 3,-1.35499 3,-3 0,-1.64501 -1.35499,-3 -3,-3 z m 0,2 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z" id="circle1801" style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none"/>

<path d="m 255,246.00586 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 1.17969 l 2.65039,13.24219 C 257.7593,261.70823 257,262.77542 257,264.00586 c 0,1.6447 1.3553,3 3,3 h 17 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 h -17 c -0.5713,0 -1,-0.4287 -1,-1 0,-0.5713 0.4287,-1 1,-1 h 15 A 1,1 0 0 0 275.0293,263 H 278 a 1.0001,1.0001 0 0 0 0.98828,-0.84375 l 0.93945,-5.96875 a 1,1 0 0 0 -0.83203,-1.14453 1,1 0 0 0 -1.14453,0.83398 L 277.14453,261 h -16.32422 l -1.80078,-8.99414 h 12.08399 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 h -12.48438 l -0.63867,-3.19531 A 1.0001,1.0001 0 0 0 257,246.00586 Z" id="path1803" style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none"/>

<path d="m 276,246.00586 c -3.30186,0 -6,2.69814 -6,6 0,3.30186 2.69814,6 6,6 3.30186,0 6,-2.69814 6,-6 0,-3.30186 -2.69814,-6 -6,-6 z m 0,2 c 2.22098,0 4,1.77902 4,4 0,2.22098 -1.77902,4 -4,4 -2.22098,0 -4,-1.77902 -4,-4 0,-2.22098 1.77902,-4 4,-4 z" id="circle1805" style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none"/>

<path d="m 276,249.00586 a 1,1 0 0 0 -1,1 v 1 h -1 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 1 v 1 a 1,1 0 0 0 1,1 1,1 0 0 0 1,-1 v -1 h 1 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 h -1 v -1 a 1,1 0 0 0 -1,-1 z" id="path1807" style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.1;-inkscape-stroke:none"/>

</g>

</svg>
Такого в растровом изображении вы точно не увидите
Внутри SVG есть технология создания анимации — SMIL — это отдельная спецификация для анимации, которая действует только для векторной графики. В ней определённый набор тегов и их атрибутов, которые позволяют работать с конкретными точками — частями SVG-изображений. Например, всем знакомый сервис SVGator для дизайнеров и «непрограммистов» работает со SMIL. Такой тип анимации применяют, когда CSS не справляется с задачей, не позволяет анимировать изображение внутри SVG-картинки. Например, когда нам нужно изменить форму фигуры: был квадрат, а должен превратиться в звезду — то есть в тех случаях, когда у нас должны изменяться координаты точек и линий у изображений.

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

SVG анимация подходит даже для анимирования полноценных иллюстраций, ведь они тоже векторные. Если:

  • на иллюстрации лошадь,
  • нам нужно, чтобы она бежала,
  • это векторное изображение,
  • то это реально сделать при помощи данной анимации, просто геморрно

JavaScript анимация

Это самый сложный способ создания анимации, но самый продвинутый. Как правило, используют, когда другие способы создания анимации не подходят. Например, когда нужно создать сложную анимацию, которая вызывает WOW-эффект или отвечает за функциональность интерфейса: все 3-х мерные погружения в проект, параллакс-эффекты, скольжения, зависимые анимации, и, банально, тот же слайдер — самый часто встречающийся пример JavaScript анимации. При нажатии на кнопку «Следующий слайд» происходит смена слайдов. Там задействована и CSS анимация, но действие происходит за счёт JavaScript.

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

WebGL и Three.js

Используются для анимации 3-х мерных объектов на сайте или создания 3D сцен. Всё, что касается создания 3-х мерных объектов, 3-х мерных вращений в пространстве, делается при помощи JavaScript анимации. Однако, эти анимации не совсем с нуля пишутся, а с использованием специальных библиотек, как правило основанных на WebGL. Самые популярные библиотеки — Three. js и GSAP. Они очень упрощают и ускоряют разработку анимации на сайте.
В одном из своих проектов, для придания «космичности» мы использовали такое решение на Three. js :

7 принципов создания качественной анимации

Как профессионально проработанная анимация способна оживить и добавить премиальности любому проекту, так кривая анимация способна уничтожить даже самый крутой дизайн. Рассказываем, на что обратить внимание, чтобы анимация вызывала восторг, а не пригорание *опы.

Скорость и плавность анимации

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

Скорость в анимации — отношение объёма изменений ко времени этих изменений. То есть насколько быстро объект меняет свою форму или положение с течением времени.

Главное в скорости анимации — влияние на наше восприятие. Именно скорость и её настройка задаёт динамику анимации и настроение, которое мы хотим передать, ассоциации и эмоции. А физические ощущения, которые мы получаем от этой анимации, влияют на итоговое восприятие человеком.

Например, возьмем кнопку. Мы можем настроить ей анимации при наведении, чтобы она увеличивалась и меняла цвет, но при этом не поставить никакой скорости. Что произойдёт: кнопка тупо моргнёт, станет большой и другого цвета. Восприятие будет не то. Понятно, что это интерактивный элемент, функциональную часть анимации передали, но эстетика таким образом — не передана. Если же задать анимации плавность (сглаживание), то эффект будет восприниматься гораздо приятнее.
Принцип 1.
button
button
То же самое касается более сложных решений: появлений текста, эффектов при наведении на карточки или изменения их размера, затемнения — всё это передаёт нам динамику и настроение.

В понятие скорости входят изменения, которые происходят: на старте, в средней зоне, на финише. Это ключевые составляющие анимации, которые и будут влиять на восприятие.
При проектировании анимации важно учитывать 3 момента:

  • сколько она будет длиться,
  • с какой скоростью она будет начинаться,
  • с какой скоростью она будет заканчиваться.
Всё, что касается базовой функциональной анимации — наведение, появление, всплытие — средняя длительность таких анимаций 0,3−0,5 секунды. Это наиболее приятная длительность. Если посмотреть на сайт нашей студии, все кнопки, появления текстов, объектов или элементов, чёрточек, полосочек — всё в этом диапазоне.

Как правило, все временные параметры анимации пишутся в миллисекундах. Проигрывание не может быть мгновенным, потому что всё, что мгновенно, воспринимается неестественно. В некоторых случаях даже может доходить до того, что анимированный объект будет восприниматься как подглючивание: как будто что-то сломалось, дёрнулось, моргнуло, появилось. Возникнет мысль: сайт плохо работает. Поэтому, если что-то анимируем, всегда учитываем длительность.

Всё, что касается затяжных анимаций — «кинофильмов» — настраивается индивидуально в зависимости от эмоций и ощущений, которые хотим передать. В таких случаях оптимальные значения длительности подбираются тестами.

Физические свойства анимированных объектов

Помимо длительности прорабатывается плавность старта и окончания — сглаживание (в простонародье «изинги» от easing). У любого объекта есть физические свойства. Анимация, которая передаёт физические свойства элемента, воспринимается нативнее, понятнее и даже интереснее. Как правило, эти физические свойства задаются началом и завершением движения: именно так мы воспринимаем движение чего-либо в жизни.

Почувствуйте разницу:
01
Проиграть анимацию
Ещё одно воспринимаемое физическое свойство — вес объекта. Чем крупнее объект, тем больше у него инерционная масса. Чем больше инерция, тем медленнее этот объект перемещается, плавнее начинает и заканчивает движение, в отличии от такого же элемента, но меньшего размера (веса).

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

Смотри:
Итак: восприятие, динамичность, характер анимации, эмоции и ощущения от анимации — напрямую зависят от передачи физических свойств анимированного объекта. Все эти физические свойства обыгрываются с помощью изингов (easing).

Easing (изинги) и виды сглаживаний анимации

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

Например, линейная анимация без всяких сглаживаний и замедлений выглядит так:
02
Линейная анимация — постоянная скорость изменений (движения)
По графикам можно научиться определять, как объект будет анимирован, какой у него характер движения. Ось У — это объём изменений (грубо говоря в %), а ось Х — время. Если график выглядит просто как прямая по диагонали — это линейные изменения. У анимации нет сглаживания, нет явного начала и окончания, как если мы смотрим на шоссе с воздушного шара — все просто едут.

Easing — функции сглаживания и их типы

Есть несколько типов сглаживания. Самое примитивное — линейное. Оно неестественное, потому редко используется в реальной практике. Это дефолтное значение, по которому палится дилетантство разработчика (как правило, начинающие разработчики не особо заморачиваются с анимацией, их беспокоят другие вопросы).
03
Простое сглаживание: оно так и называется — ease. Это довольно естественная анимация, задаётся кубической кривой Безье, которая отражает плавный старт и плавное замедление, но при этом, более или менее равномерное.
easy in — анимация с плавным стартом и дальнейшим ускорением.

easy out — анимация с линейным стартом и плавным замедлением.

easy in out, который очень похож на кривую easy, только у него более плавный старт и более плавное замедление — дольше стартует и дольше завершается.

И ещё один тип — Cubic Bezier. Это отдельное свойство, с помощью которого можно задать сложные нестандартные типы старта и замедления.
Easy in
Easy out
Easy in out
Cubic Bezier
К отдельному от перечисленных типов сглаживания мы бы отнесли отскок — свойства elastic и bounce (упругость и отскок). Эти эффекты придают движению естественный характер для «резиновых», «эластичных», «отскакивающих» элементов дизайна.

Например, если представить, что падает металлический шарик (падает он очень стремительно), то отскок у него если и будет, то практически не заметный. Это можно задать при помощи свойства bounce с маленькой амплитудой. Если шарик на пружинке, то реалистичность анимации можно передать через elastic.
Bounce
Elastic
Когда мы используем bounce, объект в конечной точке как бы ударяется в стенку и отскакивает от неё, а дальше, в зависимости от амплитуды, мы можем передать его свойства — сколько раз отскакивает, с какой силой (например, падает кружок — при маленькой амплитуде мы будем воспринимать его как металлический шар, так как он почти не отскочит, а при большой — как баскетбольный мяч, так как возникнет много отскоков с большой силой). Если же задать elastic, это можно сравнить с рогаткой. Если взять в руку рогатку, натянуть тетиву и отпустить — шарик полетит вперёд. Смотря на резинку, мы увидим, что она улетает вместе с шариком вперёд, а потом возвращается. То есть эластик — это про упругость.

Все способы описания сглаживания передают физические свойства объекта, формируют правильное восприятие от того, что изображено на экране и передают общую эмоцию. Для каких-нибудь кнопок это не требуется, но для более сложных решений, появлений, отскоков, сложных зависимых анимаций — это необходимая вещь, которая всегда используется. Мы хотим передать ощущение ожидания? Что сейчас нам что-то покажут? Вот пример выдуманной анимации для какого-нибудь логотипа, который передаёт динамику, окончание процесса и отлично встанет в прелоадер:
Пример анимации, в которой сочетаются все описанные выше свойства одновременно.

Достаточное время для разработки

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

Конечно, то, что касается базовых появлений и наведений, делается на ходу. Но всё, что касается более сложных решений, необходимо закладывать заранее, потому что любое создание анимации непредсказуемо по времени реализации.
Принцип 2.
«Какие-то знакомые вещи, даже если они крайне сложные, ты можешь оценить по времени. Но, как правило, приходит что-то новое, например, заказчик говорит: „У меня такая задумка, чтобы карточки с флагманскими услугами, по мере прокрутки страницы, летали и перелистывались как бы по орбите в пространстве“, — ты не можешь даже диапазон времени назвать достаточно точно. В любом случае возникнут какие-то подводные камни, нужно будет продумывать возможность проектирования анимации во всех браузерах, потому что одни свойства работают в одном браузере, другие — во втором, третьи — в третьем. И это не решается одной строчкой кода, бывают случаи, когда нужно вообще полностью переписать код на анимацию отдельно для другого браузера».
— Дмитрий Навалов, WVS
Поэтому, важно понимать, что любое создание сложной джаваскриптовой анимации (причём пофиг: просто JavaScript или 3-х мерная на Three. js) обязательно закладывается на старте работ, на этапе прототипирования, проектирования, поиска референсов. Референсы также ищутся для анимации, чтобы продемонстрировать их и заказчику, и фронтенд-еру. Бывают сложные случаи, когда нужно с нуля придумать, как какой-то эффект будет выглядеть. Обычно это делается с помощью Figma Smart Animate, либо с помощью программы Adobe After Effects. Последняя позволяет всю придуманную анимацию выгрузить в формате видеоролика, а затем продемонстрировать и прикрепить к ТЗ на разработку. И всё это сказано к тому, что в реализации анимации вопрос ко времени относится не только к разработчику, но ко всей команде. Чем сложнее решения, тем больше времени закладывается на их реализацию, причём в геометрической прогрессии:

  • Проджект — часами согласовывать с заказчиком, демонстрировать идеи команды, искать взаимопонимание, стараться удержать баланс между крутостью + сроками + бюджетом + производительностью интерфейса + желаниями заказчика.
  • Дизайнер — подготовка идей, поиск референсов, съёмка презентационного ролика и т. д.
  • Разработчик — реализация, тестирование, корректировки и оптимизация.

Производительность

CSS — легче, JavaScript — тяжелее. Соответственно, нужно учитывать, насколько сильно вы загружаете анимацией свой сайт, быстродействующим ли после этого он будет, и как это всё будет работать на устаревших моделях устройств. То есть, грамотный специалист, который работает с дизайном интерфейса, должен учитывать производительность устройств для этого интерфейса. Будучи дилетантом, можно легко допустить ситуацию, что на этапе проектирования и прототипирования были заложены и согласованы с заказчиком мега-анимации, с него взяли кучу денег, реализовали, а по итогу сайт не работает.

Поэтому нельзя перегибать с анимацией и в обязательном порядке нужно учитывать производительность. Всегда идёт борьба крутейших методов анимации против железа, и, к сожалению, победа в этой борьбе всё равно остается за железом. Там, где можно использовать CSS — надо использовать CSS по-максимуму. Если вообще никак не обойтись без JavaScript, то только в таком случае нужно прибегать к нему.
Принцип 3.

Равнозначность анимации

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

То есть не стоит анимировать 6 заголовков на сайте 6 разными способами — так не работает. Важно, чтобы равнозначные объекты были одинаково анимированы. В противном случае, анимация будет вызывать дикое раздражение, прям бесить человека.

Помните, мы говорили о глобальных анимациях на сайте? Глобальные анимации — эффекты, которые применяются для однотипных объектов — почти синоним равнозначности. Когда равнозначные объекты анимированы одинаково: все заголовки появляются одним способом, тексты каким-то близким, схожим к этому способом — в таком случае всё работает хорошо. Например, мы можем использовать появление снизу вверх из прозрачности, так называемый эффект fade-in-up для заголовков, а появление текстов — fade-in — просто появление из прозрачности. В таком случае, даже если это будет здоровенная статья, такое появление не будет раздражающим. Оно будет приятным для пользователя и легко восприниматься.

Если же в трех абзацах будет заголовок-текст, заголовок-текст, заголовок-текст, но на каждом текстовом элементе будет настроен свой эффект появления — это будет выглядеть отвратительно. Вряд ли вы бы смогли прочитать статью из примера ниже без нервных приступов и нахмуривания бровей:
Принцип 4.
На курсе Pro Web по профессиональному изучению веб-дизайна мы очень много уделяем этому внимания, рассказываем, каким способом нужно анимировать картинки, тексты, объекты, при этом, как грамотно и одинаково их анимировать так, чтобы не вызывать раздражение и сохранить интересность визуала. Более того, мы обучаем подбирать все глобальные анимации на этапе визуального исследования так же, как делаем это в агентстве. Такое же требование предъявляется к дизайнерам студии WebValley. Все глобальные анимации должны быть учтены заранее, чтобы, с одной стороны, мы могли прикинуть, сколько сил, времени, ресурсов уйдёт на реализацию анимации, с другой — сколько ресурсов будет жрать эта анимация, сколько у нас останется, чтобы создать частную WOW-анимацию.

Акцентность анимации

Здесь обратная ситуация: когда нужно привлечь внимание пользователя к объекту на сайте, мы можем это сделать как минимум 4-мя способами:

  • с помощью цвета,
  • с помощью пустого пространства вокруг (White Space),
  • с помощью размера, веса на экране,
  • а также с помощью анимации.

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

Например: пользователь открывает сайт, там красиво загружается экран, начинает скроллить и — херак! Справа заморгало «Сыграй и получи дисконт 20%». Пользователь как бы выкрутился в этот момент из изучения проекта, и всё его внимание направлено на эту волшебную кнопочку.
Принцип 5.

Адекватность и потеря контекста

Из всего ранее сказанного в этой статье очевидно: анимация, помимо эмоциональной части, очень мощно управляет вниманием. Если открываешь экран, на котором килотонна текста, и вдруг на фоне поедет какой-то корабль, внимание пользователя будет направлено на корабль. Помните пример с мозгом из треугольников, который превращается в другие объекты? Давайте его ещё раз посмотрим:
Принцип 6.
Великолепная 3D анимация по скроллу на сайте компании Dala
Посмотрев этот ролик, задумайтесь, вы прочитали текст на этом сайте? =).
Прочитали текст? =)
Ответить
Ваш ответ отправлен.
Вызывающая акцентная анимация способна убить коммерческую эффективность проекта — пользователь тупо не читает, он смотрит мультик, отстаньте со своими текстами и смыслами =).
«Чем необычнее и хитровыебаннее взаимодействие с интерфейсом, тем сложнее пользователю из этого взаимодействия выйти. Сильно сложная замутная анимация не просто отвлекает пользователя от контента, а в принципе заставляет забыть, зачем он сюда пришёл. Начинаешь играть с курсором, делать цветные разводы на воде, залипаешь, заигрываешься, мозг переключается и уже не настроен на какое-то изучение информации о компании и покупки».
— Вероника Юдина, руководитель маркетинга WebValley Studio
Даже когда анимации немного, нужно очень чётко понимать, где и зачем её делаешь, чтобы она не выкручивала пользователя из изучения контента, не слишком сильно его отвлекала. Либо, наоборот, достаточно сильно его отвлекала, привлекала к себе внимание, чтобы он совершил целевое действие. Поэтому анимация — это способ расставления акцентов и управления вниманием.

Зачастую у всех новичков, когда они понимают, как делать какую-то анимацию, появляется волшебный соблазн — нахерачить всё, что вообще только возможно: вот все мои знания по анимации, какие только есть, надо увеличить чек клиенту, просто всё туда вложить — появление, вращение, трансформацию, изменение размеров, чтобы всё летало, свистело, а если ещё и карточки будут в 3D переворачиваться, то это высший пилотаж, мега уровень. И это не преувеличение: мы получаем десятки резюме и портфолио на почту студии с запросом на трудоустройство, видим «анимационный борщ» на сайтах-портфолио примерно 40% соискателей в веб-дизайне, фронтенде, фулл-стек направлении, партнерстве.
На самом деле, уровень демонстрируется не набором всеразличных анимаций на сайте, вовсе не их сложностью, а именно грамотным подбором необходимых типов анимаций, их последовательности, правильной длительности и их ненавязчивости. Самое важное при проектировании интерфейса — не перегнуть с анимацией, выдержать баланс между эстетикой и восприятием информации.
В противном случае, происходит потеря контекста: пользователь перестаёт понимать, что происходит. Обычно это происходит при неправильной настройке анимации, либо при неуместном её использовании.

Например, есть ключевой продающий текст, прям мега-посыл, который человек должен прочитать, от этого будет зависеть половина конверсии сайта. А по соседству какое-то мега-анимированное решение. Куда будет привлечено внимание пользователя? На эту анимацию. Маловероятно, что пользователь прочитает текст, он его просто проскроллит. Поэтому, в случаях неправильного использования анимации, мы можем лишний раз отвлечь пользователя от важной информации, он потеряет контекст, не найдёт или забудет ту информацию, за которой вообще пришёл на сайт, и по итогу уйдет с него.
Стоит отметить, когда на сайте летает вообще всё, есть 2 момента:
Если это делал дилетант, то, как правило, сайт закрывается, потому что происходит потеря контекста, человек вообще не понимает, что здесь происходит, о чём проект, у него просто перегруз мозга после 4-го полёта какой-нибудь карточки слева направо.
Если это конкурсный сайт, например, под Awwwards (а там действительно много крутейших проектов с невероятной анимацией) — всё здорово проработано, премиум уровень, анимации согласованы, но они прям сложные — надо понимать, что там более 50% проектов сделано чисто ради конкурса, демонстрации уровня или банально пафоса. На конкурсных площадках в основном «дизайн ради дизайна», ради награды, ради того, чтобы показать свои скиллы, пропиариться, какой-то престиж заработать. Там почти не идёт речь о высоко-конверсионных продуктах. В основном это брендовая демонстративная история.

Посмотрев 20 сайтов на том же Awwwards, всё, что запомнишь — что на каком-то чёрном сайте были какие-то классные штуки. О чём был этот сайт — уже не вспомнишь. Именно с точки зрения смыслов и контента, его крайне сложно воспринимать, ведь всё внимание сосредоточено на эффектах. Это можно сравнить с американскими горками: вас со скоростью звука выкидывает с точки старта, вы летите по мёртвым петлям, радуетесь, орёте, вы вовлечены, у вас вырабатываются килотонны адреналина, и мозг, кроме адреналина, ничего не воспринимает. Приезжаете на финиш и думаете: «ох, как классно, я чуть не сдох, у меня сейчас сердце отвалится». Вы все в эмоциях, мозг перегружен, нейроны бомбят. Но если задуматься — а вы все петли помните? А все повороты? Как вы поворачивали, в каком порядке? А что было за кадром, кроме деревьев? Что увидели с высоты? Вы почти ничего не увидели!

Мозг не в состоянии воспринять слишком большой объём информации. Анимация — это тоже входящая информация. Мозг обрабатывает все движения, переходы, эффекты. Если мы хотим ещё какой-то контент передать человеку, чем-то нужно жертвовать. Либо жертвуем восприятием контента, либо жертвуем количеством анимации. Выдержать баланс — как раз об этом.
02
01

Качество анимации

Важно проверять анимацию на стрессоустойчивость — запускать сайт со слабым интернетом. Это можно сделать даже с помощью браузера, без дополнительных программ и приложений. Жмём правой кнопкой мыши, выбираем, посмотреть код элемента либо через меню браузера находим инструменты разработчика, находим вкладку Network, там есть значок как у wi-fi. Если на него нажать, появятся дополнительные настройки сети: можно будет выбрать троллинг. Здесь выставляем, например 3G, и смотрим, как будет анимация работать при слабом интернете:

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

Поэтому, если при сильной нагрузке устройства, что-то подтормаживает, глючит, прерывисто работает, это не даст эстетику и WOW-эффект, а наоборот убьёт всё впечатление. Может показаться: «ну подглючивает — ничего страшного, зато какой эффектище запилили». Так кажется. Для пользователя, который будет смотреть сайт впервые, это негативный опыт, который испортит восприятие от интерфейса и, скорей всего, снизит конверсионность в разы.

Поэтому, важно:

  • не анимировать слишком много элементов;
  • пользоваться принципом повторения;
  • использовать глобальные анимации;
  • не использовать много анимаций в рамках одного блока, чтобы в момент появления объектов на экране одновременно не происходило слишком много анимации, чтобы они запускались последовательно друг за другом. В таком случае, движку, процессору, браузеру не нужно рендерить всё разом, он постепенно справляется с задачами.

И, конечно, если мы говорим об анимации связанной с графикой, изображениями, картинками, SVG — следите за весом объектов в Кб. По максимуму сжимайте их, чтобы подгрузка происходила быстрее. Это поможет избежать различных прерывистых искажений анимации.
Принцип 7.
Если добавляете анимацию в проект, она в любом случае должна быть «пёрфект», идеально исполнена, без каких-либо подлагиваний, подтормаживаний, глюков, потери куска изображения.
Сегодня уже не стоит вопрос о том, нужна ли анимация на сайте. Дизайн — это больше, чем просто визуальная презентация. Дизайн — это взаимодействие. Веб по своей природе интерактивен. Поэтому мы должны воспринимать анимацию, как естественную часть дизайна.
Алексей Гамов
СЕО WebValley Studio
02.03.2023

Автор статьи

Нам очень важно ваше мнение
ПОСТАВЬТЕ ОЦЕНКУ ЭТОЙ СТАТЬЕ
Как вам наша работа?
Доверьте разработку сайта профессионалам!
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.