Вертикальный скролл ведёт груз по горизонтали: сцена «пришпиливается» к экрану, широкая лента маршрута Китай→Россия едет влево, линия рисуется сама, а контейнер летит по ней от склада в Гуанчжоу до двери клиента в Москве. Пять станций загораются по очереди, когда доезжают до центра экрана.
Забираем товар у поставщика, консолидируем на собственном складе в Гуанчжоу, маркируем и фотофиксируем каждое место.
Готовим инвойс, упаковочный лист и экспортную декларацию КНР. Грузу присваивается номер — отслеживание включается с этого момента.
Везём выбранным плечом — авиа, авто, ж/д или море. Проходим погранпереход, статус виден онлайн на каждом этапе.
Таможенное оформление под ключ: подбор кодов ТН ВЭД, расчёт платежей, выпуск декларации. Без сюрпризов по стоимости.
Доставляем на адрес или на наш склад в Москве. Проверяем сохранность, закрываем документы — путь от поставщика до двери завершён.
GSAP ScrollTrigger пришпиливает (pin) сцену и через scrub сдвигает широкую ленту по X на -(track.scrollWidth - innerWidth) (без scroll-snap — чистый pin + перевод). Длина пина считается из реальной ширины ленты, поэтому при resize всё пересчитывается (invalidateOnRefresh + ScrollTrigger.refresh). По ходу: DrawSVGPlugin рисует линию маршрута, MotionPathPlugin ведёт груз по тому же <path> с авто-поворотом, фон (небо и точечная сетка) едет медленнее для глубины, а пять станций проявляются, доезжая до центра экрана. Заголовок раскрывается построчно из-под маски (SplitText после document.fonts.ready). Всё в gsap.matchMedia(): при prefers-reduced-motion: reduce Lenis и пин не запускаются — пять станций выстраиваются в простой вертикальный столбец, маршрут отрисован сразу, карточки видны.