Анимация — инструмент для взаимодействия с пользователем.

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

Важно! Любая анимация увеличивает время загрузки страницы.

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

Меню настройки анимации можно вызвать через контекстное меню элемента или выделить элемент и нажать английскую A.

После этого у вас появится выбор — начать работать с анимацией с нуля или выбрать готовую из набора пресетов.

В меню вы можете скопировать настроенную анимацию и перенести на другие элементы.

Пресеты — это сохраненный набор настроек для анимации, где собраны основные типы движения элемента.

Простые пресеты содержат один шаг: элемент сдвигается из точки А в точку Б, меняет масштаб, прозрачность, поворачивается или искажает форму/растягивается.

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

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

В анимации с нуля нужно выставлять все настройки самостоятельно.

Запуск анимации. Вы можете настраивать, при каком действии пользователя запускается анимация. Доступно шесть типов запуска, про каждый из которых мы расскажем ниже.

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

В примере ниже показываем варианты настройки повторения.

Шаги. Любая анимация состоит минимум из двух шагов. Начальное состояние элемента — это его положение, откуда он начинает движение. Далее вы настраиваете шаги: меняете положение, масштаб, прозрачность и прочее. Чем больше шагов, тем сложнее анимация.

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

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

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

Подробнее про тип запуска При появлении на экране.

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

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

Подробнее про тип запуска При скролле.

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

Но вы также можете использовать другие способы. Главное правило: пользователь должен понимать, зачем ему кликать на элемент.

Подробнее про тип запуска При клике.

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

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

Подробнее про тип запуска При наведении.

Единственный тип взаимодействия, где вы можете привязать анимацию к действиям в другой анимации. Это делается через привязки к конкретным шагам: одна анимация начинается на определенном шаге другой. Это нужно, когда вы делаете сложную цепочку анимаций.

Подробнее про тип запуска По триггеру анимации.