Как добавить анимацию на сайт и не облажаться

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

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

В этой статье

Методы и ограничения

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

Показать анимацию на экране пользователя можно несколькими методами.

⁠Видео. Много весит, и в нём сложно настроить бесшовное воспроизведение. Видео подходит для коротких анимаций, которые не перегружают сайт.
GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
Набор последовательно переключающихся картинок, они же секвенции. Грубо говоря, это видео без сжатия кадров, которое так же много весит и замедляет работу браузера.
Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.

Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*

Как получить измеримые результаты в фарммаркетинге.

Показываем на примерах →

Спецпроект

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

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

Библиотека Lottie

В одном из проектов мы использовали библиотеку Lottie от Airbnb. С ней можно переносить анимации на страницы браузера прямо из After Effects. Библиотека оказалась очень полезной, потому что мы как раз создавали сайт с многослойной анимацией для RBK.money.

С Lottie мы смогли добавлять на сайты сложные анимации и не думать об их размерах.

На главную страницу сайта RBK.money мы добавили зацикленный ролик длиной 15 секунд, который весит всего 65 КБ в сжатом состоянии. У нас получились плавные анимации, которые быстро загружаются и воспроизводятся без стыковок.

Преимущества

Преимущества Lottie — меньший вес и адаптивность. Библиотека работает с векторной отрисовкой. Это означает, что не придётся готовить отдельные изображения для экранов с разным разрешением.

В Lottie можно управлять анимацией — настроить воспроизведение при нажатии на триггер или интерактивную анимацию, которая следует за движением курсора.

Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остаётся только подключить этот json к сайту и настроить его воспроизведение.

Недостатки

Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы. Поэтому когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas. В нём не настраивается прозрачность, зато нагрузка на процессор ниже.

Иногда Lottie преподносит неприятные сюрпризы. Особенно после обновлений, которые иногда нарушают работу готовых анимаций. Создатели Lottie быстро приходят на помощь и решают проблему вместе с пользователями.

Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов», инструментов для плавного движения анимации. Пришлось всё делать вручную, и это заняло довольно много времени.

Вывод

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

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

Что получилось

Мы сделали необычный и запоминающийся сайт с плавными анимациями. Он понравился целевой аудитории — после редизайна посещаемость выросла за четыре месяца на 35%.

За дизайн сайта мы получили награды: почётный диплом Awwwards, четыре отметки от CSS и серебро в номинации на конкурсе Рейтинг Рунета 2019.

Мы могли сделать простой сайт, который бы выполнял свои функции. Но с анимацией он понравился и запомнился пользователям больше.

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