Какие анимации (воз)можно сделать кодом и что у дизайнера должно быть наготове

Привет, это Лиза из Лиги А.! Мы превращаем любой дизайн в код и работаем с разными веб-продуктами — от простых страничек до сложных сервисов. Написали с разработчиками эту статью, чтобы дизайнеры не ломали голову — что считать простой анимацией, а что сложной, и как правильно подготовить проект к передаче в разработку.

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

Наш разработчик Ваня, например, делал и простые анимации — появление из прозрачности и небольшое смещение блока в сторону. И сложные — анимация различных объектов по мере скролла и работа с 3D.

В основном, мы используем GSAP (the greensock animation platform) — набор инструментов для реализации анимации любого уровня сложности с помощью JavaScript. Для простых анимаций обходимся CSS. Про это расскажем дальше.

Несколько наших проектов с анимациями

Сайт, который мы делали для ассоциации креаторов Kult.

Или яркий лендинг для avito.tech «Пристрой кота».

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

Ещё разработчики относят к простым анимациям разные виды скролла — плавный, горизонтальный, Sticky и Locomotive, ScrollTrigger. Плюс небольшое смещение блока или анимации для прелоадера.

Техническая сторона простой анимации

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

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

Как говорит наш разработчик Ваня: «Проще всего сделать те анимации, которые можно привести к единому виду — например, когда у каждого текста одинаковая анимация появления».

Какие анимации считаются сложными

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

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

Бывают моменты, когда нужно сделать анимацию в 3D без модельки или с ней, как на сайте Аквариум от студии Лебедева.

Техническая сторона сложной анимации

У таких анимаций есть некоторые «усложнения», которые отличают их от простых:

1. Последовательность анимаций

2. Последовательность может работать по скроллу

3. И самое сложное — переносить анимации на Canvas

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

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

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

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

2. Если мы получили макет, комментарии и референсы → будет проще и быстрее, но всё ещё недостаточно до идеального результата

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

А как прийти к короткому пути и подготовиться? Расскажем дальше)

Техническое задание

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

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

Референсы

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

Видео или изображения

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

Несколько правил:

Обычно этот этап требует от дизайнера использования решений со встроенными инструментами для экспорта. Например, из программ After Effects, Figma, Principle или Protopie.

Как нужно подготовить макет для разработчика, например, в Figma:

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

Готовы присоединиться к классному проекту с классными дизайнерами :)

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