HTMLの記述順ではなくバラバラに表示

ページ内をスクロールして該当箇所にたどり着いた時に、決められた順番でふわっとフェードインするアニメーションを実装しました。
応用すれば他のアニメーションにも使用できそうです。

<div class="c-tile-2 js-scroll-trigger js-fadein-order">
    <div class="c-tile-2__item js-fadein-order__item" data-order="1"></div>
    <div class="c-tile-2__item js-fadein-order__item" data-order="4"></div>
    <div class="c-tile-2__item js-fadein-order__item" data-order="5"></div>
    <div class="c-tile-2__item js-fadein-order__item" data-order="2"></div>
    <div class="c-tile-2__item js-fadein-order__item" data-order="6"></div>
    <div class="c-tile-2__item js-fadein-order__item" data-order="3"></div>
</div>
<!-- [/c-tile-2] -->

/* 順番にフェードイン */
.js-fadein-order__item {
  opacity: 0;
}

.is-active .js-fadein-order__item {
  opacity: 1;
  transition: opacity 1s;
}

.is-active .js-fadein-order__item[data-order="1"] {
  transition-delay: 0.5s;
}

.is-active .js-fadein-order__item[data-order="2"] {
  transition-delay: 1s;
}

.is-active .js-fadein-order__item[data-order="3"] {
  transition-delay: 1.5s;
}

.is-active .js-fadein-order__item[data-order="4"] {
  transition-delay: 2s;
}

.is-active .js-fadein-order__item[data-order="5"] {
  transition-delay: 2.5s;
}

.is-active .js-fadein-order__item[data-order="6"] {
  transition-delay: 3s;
}

/* レイアウト用 */
.c-tile-2 {
  --col: 6;
  margin-bottom: 100px;
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: 20px;
}

@media screen and (max-width: 750px) {
  .c-tile-2 {
    --col: 2;
  }
}

.c-tile-2__item {
  background-color: black;
  color: white;
  width: 150px;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  opacity: 0;
}

.c-tile-2__item:nth-child(1)::before {
  content: "1";
}

.c-tile-2__item:nth-child(2)::before {
  content: "2";
}

.c-tile-2__item:nth-child(3)::before {
  content: "3";
}

.c-tile-2__item:nth-child(4)::before {
  content: "4";
}

.c-tile-2__item:nth-child(5)::before {
  content: "5";
}

.c-tile-2__item:nth-child(6)::before {
  content: "6";
}

window.addEventListener('load', () => {
    'use strict';

    const targetElements = document.querySelectorAll('.js-scroll-trigger'),
        addClass = 'is-active',
        options = {
            threshold: 0.2
        };

    const observer = new IntersectionObserver(showElements, options);

    targetElements.forEach((targetElement) => {
        observer.observe(targetElement);
    });

    function showElements(entries) {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                // 各 .targetElements に is-active を加える
                entry.target.classList.add(addClass);
            }
        });
    }
});