Разбор: зачем нужны анимации на сайтах + 7 полезных инструментов и библиотек для их создания

[apxi]

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

[alexxisr]

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

[lagudal]

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

[E_STRICT]

Одна из них – заполнение времени, которое пользователю нужно ждать загрузки страницы.

Вариант сделать загрузку страницы быстрой не рассматривается?

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

Особенно когда пользователь заходит на сайт с древнего ноутбука или телефона, с 5% зарядки и медленным интернет соединением.

[alexlash]

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

[alexlash]

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

[alexlash]

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

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

[apxi]

Помня про инвалидов (что похвально) вы забываете про простых людей, которых большинство и большинству из них ваши дуделки вообще не уперлись, а только бесят.

[alexlash]

которых большинство и большинству из них ваши дуделки вообще не уперлись

Есть пруфы какие-то по этому поводу или мастерство экстраполяции?

[apxi]

А у вас есть пруфы, что эти свистоперделки многим нужны?

[E_STRICT]

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

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

Обратите внимание на красное предупреждение в верхней части страницы.
developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

[alexlash]

Меня хабр не перестает радовать – здесь есть какие-то общепринятые представления о прекрасном, которые никак не соотносятся с реальностью (типа анимации зло, рекрутеры все бездельники, маркетинг — ерунда), и народ готов подогнать весь мир под это.

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

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

Ниже – пример анимации из мобильного веба, что, прям если делать так, как слева – это действительно хуже?

[alexlash]

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

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

[E_STRICT]

но если да, то рассуждения об одноногих инвалидах, которых тошнит от анимации выглядят немного странно

вы полностью забываете про людей с дислексией

Вы ведь сами эту тему подняли.

[smass-man]

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