Копируем последнюю группу, "Объект" (сейчас это Объект 3)
Заполняем нужные данные, настраиваем цвета и градиенты
Настраиваем анимацию карточки, пошагово:
- выписываем себе отдельно высоту добавленного объекта (обычно 570)
- переходим в настройки "объект 1", находим внизу "базовая анимация", строка "расстояние". В эту строку допечатываем к цифре, которая уже есть + Х (, где Х - высота нашего последнего добавленного объекта, напр. 570, или другие цифры)
- число должно посчитаться (суммироваться) автоматически
- то же самое проделываем с другими карточками ( в настройке анимации каждой карточки добавляем высоту последнего добавленного объекта, т.е. нам нужно увеличить нашу анимацию на высоту последнего добавленного объекта, но эта анимация для каждой карточки настраивается отдельно)
- в последнем объекте аниация настраивается заново - выделяем весь объект, находим справа "базовая анимация", жмем "фиксация", выбираем "по низу окна". Расстояние ставим равное высоте блока (570)
Настраиваем анимацию для цифры сбоку карточки
- Заходим в "объект 1" или "объект 2"
- находим текст Т 01 или Т 02
- в самом низу находим "пошаговая анимация"
- наводим мышку, справа появятся 2 серые иконки
- наводим на них мышку, на одной из них будет "копировать анимацию", нажимаем туда
- переходим в настройки нашей цифры, внизу находим "пошаговая анимация"
- нажимаем "добавить"
- в открывшемся окне нажимаем "вставить"
нажимаем "сохранить и закрыть", проверяем корректность на предпросмотре
для мобильной верстки - аналогично. увеличиваем расстояние всех карточек на высоту последней добавленной карточки. эта высота в десктопной и мобильной версии отличаются, поэтому надо настраивать отдельно
Важно! менять эту высоту карточки нежелательно, лучше копировать. Карточки настроены так, чтобы перекрывать предыдущие
Внизу под каждой карточкой есть шейп, он прозрачный и нужен для того, чтобы между наложением карточек была пауза - чтоб успеть прочитать текст и нажать на кнопку. Его высота - 103, высота карточки 467, общая высота объекта 570
Очень важно "состыковывать" объекты с учетом высоты этого прозрачного шейпа, тогда карточки будут наезжать друг на друга ровно. Как это делается?
- В слоях предыдущего Объекта находим нижний шейп, выделяем его, меняем цвет и прозрачность
- Новый добавленный объект состыковываем вплотную с этим шейпом
- Убираем прозрачность шейпа на 0, на предпросмотре проверяем аккуратность анимации
Еще важный момент: стараемся сохранять исходные размеры цветной карточки и прозрачного низа, особенно высоту. иначе наезжать будут друг на друга криво, разница в высоте будет видна
моб.: карточка 320*662, низ 320*103