Галерея NW NEW WAY 19 · Гонка сроков
Сроки · гонка во времени, не в пространстве

Четыре способа,
один скролл

Здесь скролл — это часы, а не километры. Четыре дорожки — Авиа, Авто, Ж/Д, Море — уходят вглубь как трек. Стоит начать крутить, как четыре фишки стартуют разом: Авиа отрывается и финиширует уже на 6-й день, пока остальные ещё ползут. Преимущество по срокам видно не цифрой в таблице, а физическим отрывом.

ось скролла = время GSAP pin + scrub split-flap табло
Прокрутите вниз — нажмите педаль времени
День 0 · старт · Китай → Москва
прошло в пути
0 дн.
6 ДНЕЙ
Авиа финиширует первой
Авто · ещё ~10 дн
Ж/Д · ещё ~15 дн
Море · ещё ~35 дн
День 0День 45
Сроки доставки · Китай → Москва

Результаты гонки

Рассчитать доставку
Победитель гонки
Рассчитать доставку
Скролл управляет временем, а не пространством. GSAP ScrollTrigger пришпиливает сцену (pin, scrub) на 500vh, а прогресс маппится на дни нелинейно через CustomEase — первые ~9 дней занимают половину скролла, чтобы дать насладиться отрывом Авиа. Позиция фишки по дорожке = min(дни / срок, 1). Трек — чистый CSS-3D (perspective + rotateX, transform-style: preserve-3d), фишки контр-вращаются, чтобы смотреть в камеру без зеркала. Финальное табло — split-flap на чистом CSS/JS (перекидные створки, без либ). Плавный скролл — Lenis. Всё в gsap.matchMedia(): при prefers-reduced-motion — статичная таблица результатов с выделенной строкой Авиа.

NEW WAY · песочница мокапов · 19 — гонка сроков