Можно/целесообразно ли делать анимированные переходы в вебе?

Question

[Evelina1]

Насколько проблематично с технической точки зрения будет реализовать анимированные переходы в вебе (какие угодно, ну вот, например, как в примерах по ссылкам: https://page-transitions.com/ (верхнее меню) или https://dribbble.com/shots/3124800-Rise-Course-Overview )?
Суть перехода - плавная, анимированная смена экранов интерфейса, а не когда все просто исчезает, а потом из ниоткуда появляется.

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

Пишу работу на эту тему, в технической стороне вопроса пока не разбираюсь, поэтому для начала решила задать вопрос тут. Буду очень благодарна за ответ! :)

Comments

[Сергей delphinpro]

Возможно ли? Да, возможно.
Будет ли нормально подгружаться страница? Зависит от рукожопости исполнения.
Как лучше сделать? На этот вопрос не будет точного ответа. Подход к реализации будет выбираться индивидуально для конкретного проекта.

[Сергей delphinpro]

Сначала нужно получить ответ на вопрос "Нужно ли это?" Для сайта-портфолио или презентации годится, для портала или магазина — сомнительно.

[Evelina1]

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

[Антон]

Evelina1, В первом варианте, там нет никаких подгрузок, никаких запросов "дельных", по-сути, не происходит, иными словами, весь контент уже имеется подгруженным на странице. Как уже коллеги говорили тут, в случае забора с сервера какого-либо контента - всегда время, долго ли или быстро, зависит уж от понятных факторов, но что делать если запрос на получение контента идет долго? Вся эта красота, таким образом, улетает в трубу.
Реализовать то это можно, но по факту, вероятнее всего, на выходе будет гумно

[diosoleg]

Несколько раз реализовывал сложные анимации. Они ни к чему. В зависимости от браузера, кое где могут тормозить, ну и от железа зависит (ПК, смартфона).
В тех примерах выше.
Там где графика, если бы подобное было реализовано, то большая вероятность, что не успевал бы подгружаться контент до завершения анимации, либо приходилось каждый раз смотреть анимацию загрузки, пока все необходимые данные загрузятся.
А тут уже два вопроса? Если на следующей странице картинок на несколько мб, то нужно ждать пока все загрузятся или загружать только на видимой части экрана.

Со стороны бы все выглядело классно (что показано на многих анимациях в Dribble и Behance), если бы у всех были высокие скорости интернета и нормальные устройства для обработки анимаций, чтобы работала без зависаний, "прерываний".

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

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

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

Answer 1

[karambafe]

Классный пример, спасибо, сохранил себе в закладки.

Тут сильно зависит от технологий, которые применяются в проекте. Если это стандартный серверный рендеринг, то такое сделать не получится. В данном же случае используется изоморфный фреймворк nuxt.js, который при переходам по ссылкам внутри проекта использует клиентский рендеринг, а при "прямой" загрузке страницы - серверный.
Именно за счет клиентского рендеринга можно хранить глобально определенные данные и делать такие смены интерфейса

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

Comments

[Evelina1]

Спасибо!
Но я правильно поняла, второй подводный камень пропадает, если использовать, например, названный вами фреймворк nuxt.js? Или все-таки нет?

[karambafe]

Только на nuxt.js  свет клином не сошелся :) Есть и другие технологии, допустим, next.js для React, скорее всего есть что-то для Angular (не работал с ним, поэтому конкретно не могу сказать). Вот еще barba.js подсказали. Нужно просто поискать.

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

Answer 2

[Алексей Скляров]

Если хотите попробовать, попробуйте barba.js, с помощью него можно сделать нормальные переходы между страницами (и не надо никакие SPA делать). В качестве инструментов для анимации (если сами писать не умеете или не хотите) могу посоветовать: tweenmax и другие решения (которые найдете там же).

Comments

[Evelina1]

Спасибо, посмотрю!

Answer 3

[Марат Гарифуллин]

Такого рода анимации предполагают работу без перезагрузки страницы. Если это какой-то контентный сайт, то возникнут сложности с подготовкой сайта к СЕО. Отсюда сильно возрастет ценник на разработку. Не знаю, готов ли кто-нибудь переплатить за красивые анимации, а потом еще переплатить за SSR. А потом еще год отлавливать баги)

Comments

[Evelina1]

Спасибо!

[lukoie]

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

Answer 4

[lukoie]

В примере первая ссылка это просто слайдер, только так грамотно оформленный. Это не сложно, тут просто слайдер употребили офигенски с креативом, реализовали на вьюжс(можно даже по фавикону увидеть), и динамически грузят данные.
(кстати, вот тут рассказывают об этом проекте: https://css-tricks.com/native-like-animations-for-...

Второй пример - это так юикс дизайнеры забавляются(это просто анимашка без реальной верстки, хотя реализовать такое тоже реально). Оно полезно для вау-эффекта. Для повседневных сайтов лучше не надо - именно потому что такая анимация будет больше нагружать зрение, и для восприятия контента будет отнимать лишнее внимание - то есть будет падать юзабилити, и соотвтетствующие показатели - время задержки на странице, время проведенное на сайте, кол-во посещенных страниц и т.д.
Относительно №технической стороны" - такое сейчас реализовуется при помощи джаваскрипт фреймворков(ноды, вью, реакты и ангуляры), ну и на фронте активно цсс.

Comments

[Evelina1]

Спасибо за ответ!
Моя работа как раз и должна быть посвящена тому, как лучше использовать анимированные переходы с точки зрения пользовательского опыта (я, вообще, дизайнер). А вопрос в техническом плане в том, целесообразно ли вообще рассматривать в моей работе анимированные переходы в вебе. По сути, вот он - главный вопрос :)

[Алексей]

Evelina1, извините, что влезаю. На мой взгляд, как пользователя, вау-эффект уместен на сайтах-визитках / портфолио веб-дизайнера =)
Если это что-то сложнее, типа блога - уже не хотелось бы это наблюдать, т.к. я захожу не в первый раз и все это уже видел, т.о. анимация замедляет момент получения желаемого и отвлекает, также может тупо тормозить на устройстве. Хотя я готов изменить свое мнение, если попадется удачный пример.