Как плавно можно изменить порядок в flex?

Question

[accountnujen]

Попытка плавно анимировать изменение блоков во время прокрутки.

4 блока. Все они находятся в фиксированном контейнере наверху страницы. На картинке показал как выглядит состояние до (1) и состояние после (2). Состояние "до" - это положение наверху сайта. Когда начинаешь пролистывать страницу вниз - блоки должны плавно измениться и встать в положение "после". Зелёный должен плавно исчезнуть, а фиолетовый должен занять его место.

Затык у меня в том, что я не могу на место зелёного поставить фиолетовый. Если я делаю через "order", то это всё происходит рывком. Если размещать зелёный и фиолетовый в один контейнер, то синие можно разместить только через position: absolute. Если конечно другое решение не будет найдено, то буду использовать его, но оно мне не очень нравится.

Comments

[Ankhena]

Видите ли, нет значений, например, между order 1 и 2. Они дискретны. Соответственно, не анимируются.
Используйте анимируемые свойства.

Answer 1

[kryamk]

Попробовал фиолетовый абсолютом, но поди и правда лучше абсолют синим задать