Как работают анимации у Family. Разбор

Пока я писал свой вариант переходов в шторках, пришлось изучить под микроскопом Family и Craft и перепробовать 10 вариантов разных штор, чтобы наконец получить то, что было у меня в голове

Итак

У модалки может быть три составляющих:

1. Хедер
У него просто фиксированная высота и тайтл, он лежит в основном контейнере и просто чиллит. Можно дописать морфинг букв внутри тайтла — тогда будет совсем по красоте. Его просто меняем через opacity и easing

2. Тело модалки
Тут всё интереснее — это основной контент, который и будет морфиться. Логика перехода следующая: старый контент улетает вверх со скейлингом 1.1 на разницу в пикселях между первым и вторым контентом. Типа первый 200, второй 240 — на 40 улетит вверх со скейлингом. Одновременно снизу с той же размерностью, но со скейлом 0.9 прилетает новый контент и замещает старый

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

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

Базово всё. Подготовил видос в 10 раз медленнее, так понятнее будет

Дизайн сейчас не тот что был...

В этом году мне посчастливилось оценивать работы на Рейтинге Рунета. Оценивал B2С, бизнес для потребителя, сервисы и интернет-магазины. Не покидает ощущение, что люди разучились делать красиво

Очень много работ просто скипается или не открывается — здесь дизлайк разрабам и пиарщикам

Читайте правила подачи, будьте уверены что работы на проде выглядят норм, что они открываются и не ебут мозги сложными регами. Если у тебя рега занимает 5-8 экранов или в прилагу нельзя зайти без ИП — минус

Для себя разделил все работы на три категории:

Просто работает
Сделали просто обертку для какого-то движка, все работает и на этом спасибо

С претензией
Обычно кастомная разработка и много эффектов, дизайна и свистоперделок, чаще всего бренды одежды или лендосы

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

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

Я домучил поддержку Apple, теперь я официально разраб

Стоило это мне две недели жизни, можете поздравить

А я и не дизайнер, как будто

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

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

Вот мой флоу использования нейронок за неделю:

1. Собрал на CodePen кусок кода для сайта, чтобы разработчику сэкономить время и успеть выкатиться до НГ

2. Написал плагин для Фигмы, потому что все остальные плагины или платные, или работают через жопу

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

То есть дизайнерских задач — 0

С другой стороны, нейронка — это же по сути заплатка: собрать решение в той области, где нужно время сэкономить или ты не шаришь, и, как бы, такой флоу вполне логичный

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