Как мы анимировали сайт в космическом стиле для крупного российского вендора Аванпост

Привет, это Лиза из Лиги А.! Глаза ��оятся, руки делают — официально девиз этого проекта. Внутри статьи расскажем, как разработали главную страницу сайта по сложной дизайн-концепции и оживили космические корабли. Как итог, потратили больше 300 часов и реализовали больше 10 видов анимаций.

Мы создаём сложные цифровые сервисы для стартапов и растущего бизнеса. Особенно круто у нас получается разрабатывать личные кабинеты, интернет-магазины и корпоративные продукты — надёжные, удобные и масштабируемые.

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

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

Аванпост — крупный российский вендор. Компания занимается разработкой продуктов для предприятий, а их платформа помогает клиентам перейти от разных способов проверки доступа к одной общей системе безопасности для всей компании.

В 2024 году Аванпост пришёл к Zapal с задачей обновить стиль компании и переделать старый сайт, чтобы выделиться среди конкурентов.

А причём тут мы?

В прошлом году мы активно рассказывали всем, что на анимациях «собаку съели». Эти рассказы довели до того, что ребята из Zapal обратились именно к нам за разработкой своей дизайн-концепции для Аванпост. Мы стали копаться в задаче, чтобы понять цели и задачи клиента.

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

С нашей стороны нужно было:

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

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

В этот раз мы обратили внимание на такие моменты:

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

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

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

Оптимизировать сияние звезды было сложно, но мы справились

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

Такой результат получился:

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

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

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

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

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

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

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

Раньше: элементы на странице появлялись друг за другом, что тормозило анимацию и пользователь дольше оставался на одном блоке. Цепочка получалась длинная.

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

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

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

Внимание на фон:

Сначала мы планировали анимировать круги с помощью Lottie

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

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

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

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

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

Закинули их в Canvas с помощью PixiJS, чтобы спокойно анимировать. Затем перевели на WebGL, чтобы отобразить точки и линии круга в виде привлекательных 3D’шек. Это позволило улучшить производительность кругов и в целом сайта. В итоге, получили плавный и красивый результат:

Ещё одна механика, на которую потратили много времени — таймлайны кругов и конфликты между ними

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

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

Рады, что добились на проекте:

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

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

Вёрстка: Astro

Анимации: GSAP, Lenis, Pixi.js

Плагины для GSAP: Scroll Trigger

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

🔗 Обсудить проект и прикинуть стоимость вместе со мной, CEO Лиги А.

🔗 Подписывайтесь на наш телеграм канал

🔗 Ищите другие проекты на нашем сайте