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

## Метаданные

- **Канал:** Tilda Publishing
- **YouTube:** https://www.youtube.com/watch?v=RF9M1o34CWY
- **Дата:** 12.05.2026
- **Длительность:** 1:37
- **Просмотры:** 3,407

## Описание

⚡ Показываем, как сделать анимацию появления товара в карточке.
Как вам такой приём? Использовали бы в своих проектах?

## Содержание

### [0:00](https://www.youtube.com/watch?v=RF9M1o34CWY) Segment 1 (00:00 - 01:00)

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

---
*Источник: https://ekstraktznaniy.ru/video/50689*