スクロール連動アニメーションの実装例

const createObserver = (options: ObserverOptions, targetsLength: number): IntersectionObserver => {
  let observer: IntersectionObserver
  let activeCount = 0

  const handleObserve = (entries: IntersectionObserverEntry[]): void => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 要素が画面内に入ったら`data-animated`の値を`true`にする
        entry.target.setAttribute("data-animated", "true");
        // アニメーションした要素は監視をやめる
        observer.unobserve(entry.target);
        activeCount++;
      }
    });

    if (activeCount === targetsLength) {
      observer.disconnect()
    }
  }

  observer = new IntersectionObserver(handleObserve, options)
  return observer
}

const initializeObserveAnimation = (targets: NodeListOf<HTMLElement>, options: ObserverOptions = {}): void => {
  // ...

  const observer = createObserver(mergedOptions, targetLength)
  targets.forEach((target) => observer.observe(target))
}

export type ObserverOptions = {
  root?: HTMLElement | null
  rootMargin?: string
  threshold?: number | number[]
}

const defaultOptions: ObserverOptions = {
  root: null,
  rootMargin: '0px',
  threshold: 0,
}

const initializeObserveAnimation = (targets: NodeListOf<HTMLElement>, options: ObserverOptions = {}): void => {
  // ...

  const mergedOptions = { ...defaultOptions, ...options }
  const observer = createObserver(mergedOptions, targetsLength)
  targets.forEach((target) => observer.observe(target))
}

const createObserver = (options: ObserverOptions, targetsLength: number): IntersectionObserver => {
  let observer: IntersectionObserver
  let activeCount = 0

  const handleObserve = (entries: IntersectionObserverEntry[]): void => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 要素が画面内に入ったら`data-animated`の値を`true`にする
        entry.target.setAttribute("data-animated", "true");
        // アニメーションした要素は監視をやめる
        observer.unobserve(entry.target);
        activeCount++;
      }
    });

    if (activeCount === targetsLength) {
      observer.disconnect()
    }
  }

  observer = new IntersectionObserver(handleObserve, options)
  return observer
}

/* JSが有効なときのスタイル */
@media (scripting: enabled) {
  [data-scroll-animation] {
    transition-property: var(--property);
    transition-timing-function: var(--easing);

    &[data-animated='true'] {
      transition-duration: var(--duration);
    }
  }

  [data-scroll-animation='fade-in'] {
    --property: opacity;
    --easing: ease;
    --duration: 1s;

    &:not([data-animated='true']) {
      opacity: 0;
    }
  }
}

[data-scroll-animation]:where([data-script='true'] *) {
  animation-timing-function: var(--easing);
  animation-duration: var(--duration);
  animation-fill-mode: forwards;

  &:not([data-animated='true']) {
    opacity: 0;
  }

  &[data-animated='true'] {
    animation-name: var(--name);
  }
}

[data-scroll-animation='fade-in']:where([data-script='true'] *) {
  --name: fade-in;
  --easing: ease;
  --duration: 1s;
}

/* ======================================================
// ふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation='fade-in'] {
    --property: opacity;
    --easing: ease;
    --duration: 1s;

    &:not([data-animated='true']) {
      opacity: 0;
    }
  }
}

/* ======================================================
// 下からふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation='fade-in-up'] {
    --property: opacity, translate;
    --easing: ease-in-out;
    --duration: 1s;
    --starting-position: 40px;

    &:not([data-animated='true']) {
      opacity: 0;
      translate: 0 var(--starting-position);
    }
  }
}

/* ======================================================
// 拡大しながらふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation='scale-in'] {
    --property: opacity, scale;
    --easing: cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
    --duration: 1s;
    --starting-scale: 0.9;

    &:not([data-animated='true']) {
      opacity: 0;
      scale: var(--starting-scale);
    }
  }
}

/* ======================================================
// 端から表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation|='clip'] {
    --property: clip-path;
    --easing: cubic-bezier(0.19, 1, 0.22, 1);
    --duration: 1s;
    --stating-path: inset(0 100% 0 0);
    --end-path: inset(0 0 0 0);

    &:not([data-animated='true']) {
      clip-path: var(--stating-path);
    }

    &[data-animated='true'] {
      clip-path: var(--end-path);
    }
  }
}

/* ======================================================
// オーバーレイと一緒に表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation='clip-with-overlay'] {
    --overlay-color: var(--c-gray);
    --overlay-duration: var(--duration);
    --overlay-delay: calc(var(--overlay-duration) / 2);

    position: relative;

    &::after {
      position: absolute;
      inset: 0;
      content: '';
      background-color: var(--overlay-color);
      transition-timing-function: var(--easing);
      transition-property: var(--property);
      rotate: 180deg;
    }

    &:not(:focus-within)::after {
      transition-duration: var(--overlay-duration);
      transition-delay: var(--overlay-delay);
    }

    &:not([data-animated='true'])::after {
      clip-path: var(--end-path);
    }

    &[data-animated='true']::after {
      clip-path: var(--stating-path);
    }
  }
}