Плавная анимация блоков при скроллинге

Задача заключается в создании плавной анимации для четырёх блоков, расположенных в фиксированном контейнере в верхней части страницы. Анимация должна срабатывать во время прокрутки контента вниз.

Исходное и целевое состояние

На иллюстрации показаны два ключевых состояния компоновки:

• Состояние «До» (1): Исходное положение блоков в верхней части сайта.
• Состояние «После» (2): Финальное положение, которое блоки должны плавно занять в процессе скролла.

Суть трансформации: зелёный блок должен плавно исчезнуть, а фиолетовый блок - занять его место, сместившись в освободившуюся позицию.

Проблема и текущие попытки решения

Основная сложность - обеспечить плавную и естественную замену зелёного блока фиолетовым. Рассмотренные подходы имеют следующие недостатки:

• Использование свойства «order»: Приводит к резкому, скачкообразному изменению позиции, а не к плавной анимации.
• Размещение зелёного и фиолетового блоков в общем контейнере: Этот метод вынуждает позиционировать синие блоки с помощью position: absolute, что не является идеальным решением с точки зрения гибкости вёрстки.

Требуется найти альтернативное, более элегантное решение, которое позволит добиться плавного визуального перехода без использования абсолютного позиционирования для остальных элементов.