Задача

Разработать циклическую анимацию для страницы сайта крупной логистической компании. Основная идея - наглядно продемонстрировать цепочку поставок по маршруту: Владивосток → Москва → Новосибирск → Владивосток → Бангкок → Нава Шева.

Этапы анимации (последовательность)

  • Шаг 1. Иконки офисов плавно опускаются на карту в заданные точки.
  • Шаг 2. Из Владивостока в две стороны расходятся пунктирные линии, которые серпантином «рассыпаются» в конечных точках: Москва (Россия) и Нава Шева (Израиль).
  • Шаг 3. Грузовик выезжает из Москвы движется через всю страну до Новосибирска.
  • Шаг 4. Поезд отправляется из Новосибирска строго до Владивостока по ж/д магистрали.
  • Шаг 5. Корабль отплывает из Владивостока курсом на юг, в Бангкок.
  • Шаг 6. Самолет взлетает из Бангкока и берет курс на Нава Шева.
  • Финал. Петля плавно заканчивается и автоматически запускается заново.

Дополнительные условия

  • Пока выполняется основной макромаршрут, иконки транспорта (грузовичок, поезд, корабль) должны непрерывно курсировать между ключевыми городами снизу вверх до полного окончания цикла.
  • Плавность и изящность переходов - важнейшее требование, никакой дерганости.
  • Все иконки офисов и средств передвижения предоставляются заказчиком, размещаются строго по утвержденной схеме прикрепленной в демо-макете.
  • Команда готова вместе обсудить мелкие нюансы: кривые, время, паузы. Поправки включаем в рабочем порядке, но базовая логика должна соблюдаться.