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

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

Итак

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

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

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

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

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

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