Что двигается, когда, насколько и по какой кривой. Видео сняты с макетов, таймлайны ниже совпадают с ними покадрово.
В центре развёрнутая карточка статуса, справа компактная карточка следующего. Стрелки переключают статусы одной непрерывной лентой: все карточки двигаются одновременно, без пауз между шагами.
Главный принцип: приходящая карточка сначала едет, а растёт с задержкой 0,1 с. Так она не наезжает на стрелки под соседним слотом.
| Слот | Сдвиг по X | Масштаб | Прозрачность | Что ещё |
|---|---|---|---|---|
| Центральная карточка | 0 | 1 | 100% | Ширина 400 px, высота по содержимому, есть ховер |
| Следующая | +371 px | 0,735 | 72% | Визуально 294 px, зазор до центральной 24 px. Высота не больше 422 px, если содержимое выше, обрезаем с затемнением снизу 96 px. Без ховера |
| За следующей, скрыта | +689 px | 0,735 | 0 | Ждёт своей очереди за правым краем |
| Ушедшая влево, скрыта | −70 px | 0,92 | 0 | Размытие 6 (в браузере около 3 px) |
Клик по стрелке «вперёд». Центральная уходит влево, следующая приезжает в центр, за ней выезжает новая соседняя.
Зеркально шагу вперёд, но с другим порядком: карточка из центра сначала уменьшается, а вправо едет на 0,11 с позже. Иначе она на старте перекрыла бы стрелки.
Карточка с прогрессом выше остальных, до 523 px. В центре она раскрыта целиком, на месте соседней обрезана до 422 px с затемнением снизу.
Подпись «Учитываются прогнозы за 4 недели» не ездит вместе с карточками. Она гаснет за 0,25 с (ease-out), ждёт 0,2 с и проявляется под новой карточкой за 0,45 с по кривой «Основная».
Стрелка при нажатии уменьшается до 0,9 за 0,1 с (ease-out) и возвращается за 0,25 с по кривой «Сжатие». Если после шага стрелка становится активной или неактивной, её прозрачность меняется между 32% и 100% за 0,4 с по кривой «Основная».
Уменьшенное движение. Если в системе включено уменьшение движения, карточки меняются кроссфейдом за 0,2 с без сдвигов, масштаба и размытия. Подпись и кнопки так же.
Только на устройствах с мышью. При наведении карточка приподнимается: появляются тень и световой кант по краю, свечение у короны и тёплые пятна фона становятся ярче, корона чуть поднимается и наклоняется. Блика нет.
| Свойство | В покое | В ховере |
|---|---|---|
| Тень ближняя | нет | сдвиг вниз 6 px, размытие 16 px, чёрный 28% |
| Тень дальняя | нет | сдвиг вниз 14 px, размытие 32 px, чёрный 20% |
| Световой кант | нет | 1,5 px по внутреннему краю, белый градиент под 135°: 45%, затем 12% на 45% длины, 4% в конце |
| Свечение у короны | 25% | 60% |
| Тёплые пятна фона | 30% и 20% | 42% и 30% |
| Корона | на месте | выше на 8 px и наклон 6° против часовой стрелки, вращение от центра |
| Блик | нет | нет |
Уменьшенное движение. Корона не двигается, тень, кант и свечение меняются за 0,2 с.
Статусы листаются свайпом. Карточка 328 px, соседние выглядывают по краям. Стрелок нет.
| Момент | Что происходит | Время и кривая |
|---|---|---|
| Палец ведёт | Лента идёт за пальцем один к одному. Подпись под карточкой гаснет, как только лента сдвинулась. | подпись 0,15 с, ease-out |
| Отпустили | Если палец прошёл больше трети ширины карточки или жест был быстрым, переключаем на соседний статус. Иначе возвращаем на место. | 0,35 с, «Основная» |
| Высота | Высота карусели подстраивается под новую активную карточку в том же движении. Контент ниже сдвигается плавно. | 0,35 с, «Основная» |
| Пагинация | Активная точка перетекает на новую позицию. | 0,35 с, «Основная» |
| Подпись | Проявляется под новой карточкой после доводки, без сдвига. | 0,3 с, «Основная» |
Карточка «Твой статус» вверху мобильного лендинга, когда у клиента есть статус или его нужно подтвердить. Появляется из лёгкого размытия и чуть крупнее, затем по очереди проявляются строки. После появления по карточке и её обводке проходит блик.
Время от показа экрана. Строки: верхняя (лейбл, статус и процент), разделитель, строка «Предварительный кешбэк».
Свечение за карточкой: мягкое пятно цвета статуса. В покое 10%, при появлении вспыхивает до 32% и оседает.
Световой кант по обводке: белый, при появлении поднимается до 50% и гаснет к 1,75 с.
Блик: полоса 240 px на всю высоту карточки, диагональный белый градиент 0% → 14% в центре → 0%, обрезан скруглением карточки. Идёт слева направо от −240 px до правого края, путь 568 px.
Блик по обводке: та же полоса ярче, с пиком 60%, видна только на кольце обводки и движется синхронно с основной.
Уменьшенное движение. Без сдвига, масштаба и размытия: карточка и строки проявляются прозрачностью за 0,3 с, блика нет.
Кубические Безье в порядке x1, y1, x2, y2. Имена используются в таймлайнах выше.