Как сделать анимацию появления товара в карточке? #tilda #zeroblock

Привет. [фыркает] Сегодня разберём, как создать вот такую анимацию по скролу. Сначала посмотрим на структуру макета. У нас есть главный экран с подложкой, заголовок, описание, кнопка и карточки товаров ниже. Теперь разберём логику анимации. На экране у нас расположены три фигурки: две боковые в профиль и одна центральная. При скроле боковые элементы разщаются в стороны, а центральная фигурка уменьшается и перемещается вниз в карточку товара. Начнём с боковых фигурок. Переходим в настройки степ анимации. Выбираем событие он onsро и ставим триггер по центру окна. Добавляем первый шаг. При прокрутке элемент должен смещаться в сторону. Устанавливаем дистанкселей. Это расстояние скрола, за которое пройдёт движение. Затем смещаем элемент на -230 пикселей по оси Y. Чтобы ускорить процесс, копируем анимацию и применяем её ко второй фигурке. Для изменения направления движения достаточно убрать минус в значении по оси Y. Теперь переходим к центральной фигурке. Выделяем её, добавляем stepп-bystп анимацию с теми же настройками. События onsротригр, центр экрана. Добавляем первый шаг. Дистанция 900 пикселей. Уменьшаем масштаб фигурки и выравниваем её по уровню с боковыми элементами. Проверяем результат. Боковые фигурки разъезжаются, а центральная уменьшается и встаёт с ними в один ряд. Далее добавим второй шаг для центрального элемента. Устанавливаем дистанкселей и перемещаем фигурку вниз в карточку товара. Так создаётся эффект проваливания. Чтобы усилить это, нужно скрыть переход между секциями. Добавляем шейп, растягиваем его на всю ширину арборда и задаём белый цвет. Он перекроет элемент во время скрола. Добавим текст и посмотрим результат. Если хотите увидеть полную версию с дополнительными эффектами, напишите об этом в комментариях.