左から順番(=HTMLの記述順)に等間隔で表示

ページ内をスクロールして該当箇所にたどり着いた時に、HTMLの記述順でふわっとフェードインするアニメーションを実装しました。

<div class="c-tile-1 js-scroll-trigger">
    <div class="c-tile-1__item"></div>
    <div class="c-tile-1__item"></div>
    <div class="c-tile-1__item"></div>
    <div class="c-tile-1__item"></div>
    <div class="c-tile-1__item"></div>
    <div class="c-tile-1__item"></div>
</div>
<!-- [/c-tile-1] -->

.c-tile-1 {
  --col: 6;
  margin-bottom: 100px;
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: 20px;
}

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

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

.is-active .c-tile-1__item {
  opacity: 1;
}

.c-tile-1__item:nth-child(1) {
  transition: opacity 0.5s 0.5s;
}

.c-tile-1__item:nth-child(2) {
  transition: opacity 0.5s 1s;
}

.c-tile-1__item:nth-child(3) {
  transition: opacity 0.5s 1.5s;
}

.c-tile-1__item:nth-child(4) {
  transition: opacity 0.5s 2s;
}

.c-tile-1__item:nth-child(5) {
  transition: opacity 0.5s 2.5s;
}

.c-tile-1__item:nth-child(6) {
  transition: opacity 0.5s 3s;
}

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

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

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

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

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

.c-tile-1__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);
            }
        });
    }
});