Анимация, у которой есть задача.

Пусть анимация объясняет связь

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

Дайте тексту закончить мысль

Текст может появляться по строкам, по словам или по буквам, но читать его всё равно будут как предложение. Короткому заголовку подходит более выразительное появление. Длинному абзацу обычно лучше стоять спокойно. Посмотрите на момент между скрытым и видимым состоянием: успевает ли человек понять смысл, прокручивая страницу в обычном темпе? Сохраняйте порядок чтения. Не разбивайте на части слитные буквы, если от этого меняется вид письма. Ивриту нужна отдельная работа с направлением справа налево. Анимация, которая убедительно выглядит на одном языке, не обязательно готова для другого.

Продумайте использование на телефоне

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

Сайт без анимации тоже должен быть полноценным

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