Animation 08

<div class="animation-horizontal-scroll js-animation-horizontal-scroll">
  <div class="animation-horizontal-scroll__intro">
    <div class="animation-horizontal-scroll__scroll-hint">
      <p class="animation-horizontal-scroll__hint">
        スクロールするとパネルが横方向に移動します
      </p>
      <span class="animation-horizontal-scroll__arrow" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path
            d="M4 6l4 4 4-4"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </span>
    </div>
  </div>

  <div
    class="animation-horizontal-scroll__section"
    role="region"
    aria-label="横スクロールギャラリー"
  >
    <div class="animation-horizontal-scroll__viewport">
      <div class="animation-horizontal-scroll__track">
        <figure class="animation-horizontal-scroll__panel">
          <img
            class="animation-horizontal-scroll__image"
            src="/snippets/card-sample-01.jpg"
            alt=""
            width="640"
            height="360"
            decoding="async"
          />
          <figcaption class="animation-horizontal-scroll__caption">
            <span class="animation-horizontal-scroll__index">01</span>
            <span class="animation-horizontal-scroll__title">タイトル 1</span>
          </figcaption>
        </figure>
        <figure class="animation-horizontal-scroll__panel">
          <img
            class="animation-horizontal-scroll__image"
            src="/snippets/card-sample-02.jpg"
            alt=""
            width="640"
            height="360"
            decoding="async"
          />
          <figcaption class="animation-horizontal-scroll__caption">
            <span class="animation-horizontal-scroll__index">02</span>
            <span class="animation-horizontal-scroll__title">タイトル 2</span>
          </figcaption>
        </figure>
        <figure class="animation-horizontal-scroll__panel">
          <img
            class="animation-horizontal-scroll__image"
            src="/snippets/card-sample-03.jpg"
            alt=""
            width="640"
            height="360"
            decoding="async"
          />
          <figcaption class="animation-horizontal-scroll__caption">
            <span class="animation-horizontal-scroll__index">03</span>
            <span class="animation-horizontal-scroll__title">タイトル 3</span>
          </figcaption>
        </figure>
        <figure class="animation-horizontal-scroll__panel">
          <img
            class="animation-horizontal-scroll__image"
            src="/snippets/card-sample-04.jpg"
            alt=""
            width="640"
            height="360"
            decoding="async"
          />
          <figcaption class="animation-horizontal-scroll__caption">
            <span class="animation-horizontal-scroll__index">04</span>
            <span class="animation-horizontal-scroll__title">タイトル 4</span>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>

  <div class="animation-horizontal-scroll__outro"></div>
</div>

<script src="https://unpkg.com/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

/* GSAP と ScrollTrigger を CDN から読み込んでください（HTML 内 script 参照）。 */

/* --animation-viewport-height でピン留めする領域の高さを変更できます。 */

/* reset */
:where(.animation-horizontal-scroll) {
  box-sizing: border-box;
}

:where(p).animation-horizontal-scroll__hint,
:where(figure).animation-horizontal-scroll__panel,
:where(figcaption).animation-horizontal-scroll__caption {
  margin: 0;
}

:where(img).animation-horizontal-scroll__image {
  display: block;
}

/* snippet */
.animation-horizontal-scroll {
  --animation-background: #fff;
  --animation-hint-color: #5e6775;
  --animation-caption-color: #fff;
  --animation-viewport-height: min(240px, 100vh);

  width: 100%;
  background-color: var(--animation-background);
}

.animation-horizontal-scroll__intro {
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: 24px;
}

.animation-horizontal-scroll__outro {
  display: grid;
  place-items: center;
  min-height: max(400px, calc(100vh - var(--animation-viewport-height)));
  padding: 24px;
}

.animation-horizontal-scroll__scroll-hint {
  display: grid;
  row-gap: 8px;
  justify-items: center;
  color: var(--animation-hint-color);
}

.animation-horizontal-scroll__hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--animation-hint-color);
  text-align: center;
}

.animation-horizontal-scroll__arrow {
  display: grid;
  animation: animation-horizontal-scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes animation-horizontal-scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.animation-horizontal-scroll__section {
  width: 100%;
}

.animation-horizontal-scroll__viewport {
  position: sticky;
  top: max(0px, calc((100% - var(--animation-viewport-height)) / 2));
  display: grid;
  height: var(--animation-viewport-height);
  min-height: 0;
  overflow: auto hidden;
  -webkit-overflow-scrolling: touch;
}

.animation-horizontal-scroll__track {
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding-inline: 24px;
}

.js-animation-horizontal-scroll--active .animation-horizontal-scroll__viewport {
  overflow: hidden;
}

.js-animation-horizontal-scroll--active .animation-horizontal-scroll__track {
  width: 100%;
  will-change: transform;
}

.animation-horizontal-scroll__panel {
  position: relative;
  display: grid;
  flex: 0 0 min(72vw, 480px);
  grid-template: 1fr / 1fr;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}

.animation-horizontal-scroll__panel::after {
  z-index: 1;
  grid-area: 1 / 1;
  pointer-events: none;
  content: "";
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0%) 45%,
    rgb(0 0 0 / 55%) 100%
  );
}

.animation-horizontal-scroll__image {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.animation-horizontal-scroll__caption {
  z-index: 2;
  display: grid;
  grid-area: 1 / 1;
  gap: 2px;
  align-self: end;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  color: var(--animation-caption-color);
}

.animation-horizontal-scroll__index {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.animation-horizontal-scroll__title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .animation-horizontal-scroll__arrow {
    animation: none;
  }

  .animation-horizontal-scroll__viewport {
    overflow-x: auto;
  }

  .animation-horizontal-scroll__track {
    width: max-content;
  }
}

(function () {
  function getScroller(root) {
    const overflowY = getComputedStyle(root).overflowY;
    return overflowY === "auto" || overflowY === "scroll"
      ? root
      : document.documentElement;
  }

  function getTravel(viewport, track) {
    const last = track.lastElementChild;
    if (!last) return 0;

    const currentX = parseFloat(String(gsap.getProperty(track, "x"))) || 0;
    const paddingRight = parseFloat(getComputedStyle(track).paddingRight) || 0;
    const lastRight = last.getBoundingClientRect().right - currentX;
    const viewportRight = viewport.getBoundingClientRect().right;

    return Math.max(0, Math.ceil(lastRight + paddingRight - viewportRight));
  }

  function init() {
    if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
      return;
    }

    gsap.registerPlugin(ScrollTrigger);

    const reducedMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;

    document
      .querySelectorAll(".js-animation-horizontal-scroll")
      .forEach((root) => {
        if (root.dataset.animationHorizontalScrollInit) return;
        root.dataset.animationHorizontalScrollInit = "true";

        const section = root.querySelector(
          ".animation-horizontal-scroll__section",
        );
        const viewport = root.querySelector(
          ".animation-horizontal-scroll__viewport",
        );
        const track = root.querySelector(".animation-horizontal-scroll__track");
        if (!section || !viewport || !track) return;

        if (reducedMotion) return;

        root.classList.add("js-animation-horizontal-scroll--active");

        const scroller = getScroller(root);
        const outro = root.querySelector(".animation-horizontal-scroll__outro");
        let travel = 0;

        function getScrollerHeight() {
          if (
            scroller === document.documentElement ||
            scroller === document.body
          ) {
            return window.innerHeight;
          }
          return scroller.clientHeight;
        }

        function layout() {
          travel = getTravel(viewport, track);
          const viewportH = viewport.offsetHeight;
          const scrollerH = getScrollerHeight();
          const topOffset = Math.max(0, (scrollerH - viewportH) / 2);
          const nextHeight = `${viewportH + travel}px`;
          if (section.style.height !== nextHeight) {
            section.style.height = nextHeight;
          }
          viewport.style.top = `${topOffset}px`;

          if (outro) {
            const leftover = Math.max(0, topOffset);
            outro.style.minHeight = `${Math.max(400, leftover + 1)}px`;
          }
        }

        layout();
        ScrollTrigger.addEventListener("refreshInit", layout);

        gsap.to(track, {
          x: () => -travel,
          ease: "none",
          scrollTrigger: {
            trigger: viewport,
            scroller,
            start: "center center",
            end: () => "+=" + travel,
            scrub: true,
            invalidateOnRefresh: true,
          },
        });
      });

    ScrollTrigger.refresh();
  }

  if (typeof gsap !== "undefined" && typeof ScrollTrigger !== "undefined") {
    init();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();

<!-- 以下を <head> に追加 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap"
  rel="stylesheet"
/>

<div class="animation-scroll-marquee js-animation-scroll-marquee">
  <div class="animation-scroll-marquee__intro">
    <div class="animation-scroll-marquee__scroll-hint">
      <p class="animation-scroll-marquee__hint">
        スクロールの向きに合わせて、マーキーの流れる方向が変わります
      </p>
      <span class="animation-scroll-marquee__arrow" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path
            d="M4 6l4 4 4-4"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </span>
    </div>
  </div>

  <section
    class="animation-scroll-marquee__stage js-animation-scroll-marquee-stage"
    data-mode="scroll"
    aria-label="スクロールで流れるマーキー"
  >
    <div class="animation-scroll-marquee__sticky">
      <p class="animation-scroll-marquee__label">スクロールで流れる</p>
      <div class="animation-scroll-marquee__stack" aria-hidden="true">
        <div
          class="animation-scroll-marquee__row js-animation-scroll-marquee-row"
          data-direction="rtl"
        >
          <div class="animation-scroll-marquee__track">
            <div class="animation-scroll-marquee__group">
              <span class="animation-scroll-marquee__item">KINETIC DRIFT</span>
              <span class="animation-scroll-marquee__item">KINETIC DRIFT</span>
              <span class="animation-scroll-marquee__item">KINETIC DRIFT</span>
              <span class="animation-scroll-marquee__item">KINETIC DRIFT</span>
            </div>
          </div>
        </div>
        <div
          class="animation-scroll-marquee__row js-animation-scroll-marquee-row"
          data-direction="ltr"
        >
          <div class="animation-scroll-marquee__track">
            <div class="animation-scroll-marquee__group">
              <span class="animation-scroll-marquee__item">SCROLL WAVE</span>
              <span class="animation-scroll-marquee__item">SCROLL WAVE</span>
              <span class="animation-scroll-marquee__item">SCROLL WAVE</span>
              <span class="animation-scroll-marquee__item">SCROLL WAVE</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section
    class="animation-scroll-marquee__stage js-animation-scroll-marquee-stage"
    data-mode="auto"
    aria-label="自動再生とスクロール加速のマーキー"
  >
    <div class="animation-scroll-marquee__sticky">
      <p class="animation-scroll-marquee__label">自動再生＋スクロール加速</p>
      <div class="animation-scroll-marquee__stack" aria-hidden="true">
        <div
          class="animation-scroll-marquee__row js-animation-scroll-marquee-row"
          data-direction="rtl"
        >
          <div class="animation-scroll-marquee__track">
            <div class="animation-scroll-marquee__group">
              <span class="animation-scroll-marquee__item">LIVE LOOP</span>
              <span class="animation-scroll-marquee__item">LIVE LOOP</span>
              <span class="animation-scroll-marquee__item">LIVE LOOP</span>
              <span class="animation-scroll-marquee__item">LIVE LOOP</span>
            </div>
          </div>
        </div>
        <div
          class="animation-scroll-marquee__row js-animation-scroll-marquee-row"
          data-direction="ltr"
        >
          <div class="animation-scroll-marquee__track">
            <div class="animation-scroll-marquee__group">
              <span class="animation-scroll-marquee__item">BOOST MODE</span>
              <span class="animation-scroll-marquee__item">BOOST MODE</span>
              <span class="animation-scroll-marquee__item">BOOST MODE</span>
              <span class="animation-scroll-marquee__item">BOOST MODE</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section
    class="animation-scroll-marquee__stage js-animation-scroll-marquee-stage"
    data-mode="scroll"
    aria-label="テキストと画像が流れるマーキー"
  >
    <div class="animation-scroll-marquee__sticky">
      <p class="animation-scroll-marquee__label">テキスト＋画像</p>
      <div class="animation-scroll-marquee__stack" aria-hidden="true">
        <div
          class="animation-scroll-marquee__row animation-scroll-marquee__row--media js-animation-scroll-marquee-row"
          data-direction="rtl"
        >
          <div class="animation-scroll-marquee__track">
            <div class="animation-scroll-marquee__group">
              <span class="animation-scroll-marquee__item"
                >STILL IN MOTION</span
              >
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-01-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
              <span class="animation-scroll-marquee__item"
                >STILL IN MOTION</span
              >
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-02-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
              <span class="animation-scroll-marquee__item"
                >STILL IN MOTION</span
              >
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-03-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
            </div>
          </div>
        </div>
        <div
          class="animation-scroll-marquee__row animation-scroll-marquee__row--media js-animation-scroll-marquee-row"
          data-direction="ltr"
        >
          <div class="animation-scroll-marquee__track">
            <div class="animation-scroll-marquee__group">
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-02-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
              <span class="animation-scroll-marquee__item">FRAME BY FRAME</span>
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-03-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
              <span class="animation-scroll-marquee__item">FRAME BY FRAME</span>
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-04-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
              <span class="animation-scroll-marquee__item">FRAME BY FRAME</span>
            </div>
          </div>
        </div>
        <div
          class="animation-scroll-marquee__row animation-scroll-marquee__row--media js-animation-scroll-marquee-row"
          data-direction="rtl"
        >
          <div class="animation-scroll-marquee__track">
            <div class="animation-scroll-marquee__group">
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-03-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
              <span class="animation-scroll-marquee__item">MIXED SIGNAL</span>
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-04-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
              <span class="animation-scroll-marquee__item">MIXED SIGNAL</span>
              <img
                class="animation-scroll-marquee__media"
                src="/snippets/card-sample-01-sm.jpg"
                alt=""
                width="160"
                height="100"
                decoding="async"
              />
              <span class="animation-scroll-marquee__item">MIXED SIGNAL</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="animation-scroll-marquee__outro"></div>
</div>

<script src="https://unpkg.com/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

/* GSAP と ScrollTrigger を CDN から読み込んでください（HTML 内 script 参照）。 */

/* Google Fonts の Oswald（SemiBold）が必要です。head.html を <head> に追加してください。 */

/* ループ用の複製は script.js が行います。表示テキストは .animation-scroll-marquee__item を編集してください。 */

/* テキストと画像を交互に並べる場合は、行に --media を付け、.animation-scroll-marquee__media で画像を挟んでください。 */

/* reset */
:where(.animation-scroll-marquee) {
  box-sizing: border-box;
}

:where(p).animation-scroll-marquee__hint,
:where(p).animation-scroll-marquee__label,
:where(section).animation-scroll-marquee__stage {
  margin: 0;
}

:where(img).animation-scroll-marquee__media,
:where(span).animation-scroll-marquee__media {
  display: block;
}

/* snippet */
.animation-scroll-marquee {
  --animation-background: #fff;
  --animation-hint-color: #5e6775;
  --animation-label-color: #8b95a5;
  --marquee-color-accent: #2b36f5;
  --marquee-color-ink: #111827;
  --marquee-stage-height: 160vh;

  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--marquee-color-ink);
  background-color: var(--animation-background);
}

.animation-scroll-marquee__intro {
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: 24px;
}

.animation-scroll-marquee__outro {
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: 24px;
}

.animation-scroll-marquee__scroll-hint {
  display: grid;
  row-gap: 8px;
  justify-items: center;
  color: var(--animation-hint-color);
}

.animation-scroll-marquee__hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--animation-hint-color);
  text-align: center;
}

.animation-scroll-marquee__arrow {
  display: grid;
  animation: animation-scroll-marquee-bounce 1.6s ease-in-out infinite;
}

@keyframes animation-scroll-marquee-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.animation-scroll-marquee__stage {
  width: 100%;
  min-height: var(--marquee-stage-height);
}

.animation-scroll-marquee__sticky {
  position: sticky;
  top: 0;
  display: grid;
  row-gap: 20px;
  align-content: center;
  min-height: 100vh;
  padding-block: 32px;
}

.animation-scroll-marquee__label {
  padding-inline: 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--animation-label-color);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.animation-scroll-marquee__stack {
  display: grid;
  row-gap: 0.12em;
  width: 100%;
}

.animation-scroll-marquee__row {
  overflow-x: hidden;
  overflow-x: clip;
  font-family: Oswald, sans-serif;
  font-size: clamp(40px, 8.5vw, 80px);
  font-weight: 600;
  line-height: 1;
  color: var(--marquee-color-accent);
  letter-spacing: 0.04em;
  user-select: none;
}

.animation-scroll-marquee__row:nth-child(even) {
  color: var(--marquee-color-ink);
}

.animation-scroll-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.animation-scroll-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
}

.animation-scroll-marquee__item {
  flex-shrink: 0;
  white-space: nowrap;
}

.animation-scroll-marquee__item::after {
  margin-inline: 0.28em 0.38em;
  font-size: 0.55em;
  content: "•";
}

.animation-scroll-marquee__row--media .animation-scroll-marquee__group {
  column-gap: 0.32em;
  align-items: center;
  padding-inline-end: 0.32em;
}

.animation-scroll-marquee__row--media .animation-scroll-marquee__item::after {
  content: none;
}

.animation-scroll-marquee__media {
  flex-shrink: 0;
  width: calc(0.8em * 8 / 5);
  height: 0.8em;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  border-radius: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .animation-scroll-marquee__arrow {
    animation: none;
  }

  .animation-scroll-marquee__track {
    will-change: auto;
  }
}

(function () {
  function getScroller(root) {
    const overflowY = getComputedStyle(root).overflowY;
    return overflowY === "auto" || overflowY === "scroll"
      ? root
      : document.documentElement;
  }

  function cloneMarqueeItem(node) {
    if (node.tagName !== "IMG") {
      return node.cloneNode(true);
    }

    const deco = document.createElement("span");
    deco.className = node.className;
    deco.setAttribute("aria-hidden", "true");
    const src = node.currentSrc || node.getAttribute("src") || "";
    if (src) {
      deco.style.backgroundImage = `url("${src.replace(/"/g, "%22")}")`;
    }
    return deco;
  }

  function cloneGroup(group) {
    const clone = group.cloneNode(false);
    clone.setAttribute("aria-hidden", "true");
    Array.from(group.children).forEach((child) => {
      clone.appendChild(cloneMarqueeItem(child));
    });
    return clone;
  }

  function fillGroup(group) {
    const originalCount = Number(
      group.dataset.animationScrollMarqueeOriginalCount || 0,
    );

    if (originalCount > 0) {
      while (group.childElementCount > originalCount) {
        group.lastElementChild.remove();
      }
    } else if (group.childElementCount > 0) {
      group.dataset.animationScrollMarqueeOriginalCount = String(
        group.childElementCount,
      );
    }

    const minWidth = Math.max(window.innerWidth, 640);
    let safety = 0;

    while (
      group.offsetWidth > 0 &&
      group.offsetWidth < minWidth &&
      safety < 8
    ) {
      Array.from(group.children).forEach((child) => {
        group.appendChild(cloneMarqueeItem(child));
      });
      safety += 1;
    }
  }

  function prepareTrack(row) {
    const track = row.querySelector(".animation-scroll-marquee__track");
    const group = track
      ? track.querySelector(".animation-scroll-marquee__group")
      : null;
    if (!track || !group) return null;

    fillGroup(group);

    if (track.dataset.animationScrollMarqueePrepared !== "true") {
      track.appendChild(cloneGroup(group));
      track.dataset.animationScrollMarqueePrepared = "true";
      return track;
    }

    const groups = track.querySelectorAll(".animation-scroll-marquee__group");
    const clone = groups[1];
    if (clone && clone.childElementCount !== group.childElementCount) {
      clone.replaceWith(cloneGroup(group));
    }

    return track;
  }

  function relayout() {
    document
      .querySelectorAll(".js-animation-scroll-marquee-row")
      .forEach((row) => {
        const track = row.querySelector(".animation-scroll-marquee__track");
        if (track?.dataset.animationScrollMarqueePrepared !== "true") return;
        prepareTrack(row);
      });

    if (typeof ScrollTrigger !== "undefined") {
      ScrollTrigger.refresh();
    }
  }

  function createTween(track, isLtr) {
    return gsap.fromTo(
      track,
      { xPercent: isLtr ? -50 : 0 },
      {
        xPercent: isLtr ? 0 : -50,
        duration: 20,
        ease: "none",
        repeat: -1,
        paused: true,
      },
    );
  }

  function init() {
    if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
      return;
    }

    gsap.registerPlugin(ScrollTrigger);

    const reducedMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;

    document
      .querySelectorAll(".js-animation-scroll-marquee")
      .forEach((root) => {
        if (root.dataset.animationScrollMarqueeInit) return;
        root.dataset.animationScrollMarqueeInit = "true";

        if (reducedMotion) return;

        const scroller = getScroller(root);
        const stages = [];
        let tickerAttached = false;

        const tick = () => {
          let running = false;

          stages.forEach((state) => {
            if (!state.active) return;

            if (state.mode === "auto") {
              if (state.boost !== 0) {
                state.boost *= 0.9;
                if (Math.abs(state.boost) < 0.02) state.boost = 0;
              }
              state.target =
                state.boost >= 0 ? 1 + state.boost : -1 + state.boost;
            } else {
              state.target *= 0.88;
              if (Math.abs(state.target) < 0.001) state.target = 0;
            }

            if (state.current !== 0 && state.current * state.target < 0) {
              state.current = state.target;
            } else {
              state.current += (state.target - state.current) * 0.2;
            }

            if (state.mode === "auto") {
              if (
                state.boost === 0 &&
                Math.abs(state.current - state.target) < 0.001
              ) {
                state.current = state.target;
              } else {
                running = true;
              }
            } else if (Math.abs(state.current) < 0.001) {
              state.current = 0;
            } else {
              running = true;
            }

            if (state.applied !== state.current) {
              state.applied = state.current;
              state.tweens.forEach((tween) => {
                tween.timeScale(state.current);
              });
            }
          });

          if (!running) {
            gsap.ticker.remove(tick);
            tickerAttached = false;
          }
        };

        const ensureTicker = () => {
          if (tickerAttached) return;
          tickerAttached = true;
          gsap.ticker.add(tick);
        };

        const setStageActive = (state, active) => {
          state.active = active;
          if (active) {
            state.tweens.forEach((tween) => tween.resume());
            if (
              state.mode !== "auto" ||
              state.boost !== 0 ||
              Math.abs(state.current - state.target) >= 0.001
            ) {
              ensureTicker();
            }
            return;
          }

          state.tweens.forEach((tween) => tween.pause());
          if (state.mode !== "auto") {
            state.boost = 0;
            state.target = 0;
            state.current = 0;
            state.applied = null;
            state.tweens.forEach((tween) => tween.timeScale(0));
          }
        };

        root
          .querySelectorAll(".js-animation-scroll-marquee-stage")
          .forEach((stage) => {
            const mode = stage.dataset.mode === "auto" ? "auto" : "scroll";
            const tweens = [];

            stage
              .querySelectorAll(".js-animation-scroll-marquee-row")
              .forEach((row) => {
                const track = prepareTrack(row);
                if (!track) return;

                const tween = createTween(
                  track,
                  row.dataset.direction === "ltr",
                );
                tween.timeScale(mode === "auto" ? 1 : 0);
                tweens.push(tween);
              });

            if (!tweens.length) return;

            const state = {
              mode,
              tweens,
              boost: 0,
              target: mode === "auto" ? 1 : 0,
              current: mode === "auto" ? 1 : 0,
              applied: null,
              active: false,
            };

            const trigger = ScrollTrigger.create({
              trigger: stage,
              scroller,
              start: "top bottom",
              end: "bottom top",
              onToggle: (self) => {
                setStageActive(state, self.isActive);
              },
              onUpdate: (self) => {
                const velocity = self.getVelocity();
                if (state.mode === "auto") {
                  state.boost = gsap.utils.clamp(-5, 5, velocity / 280);
                } else {
                  state.target = gsap.utils.clamp(-6, 6, velocity / 280);
                }
                if (self.isActive) ensureTicker();
              },
            });

            setStageActive(state, trigger.isActive);
            stages.push(state);
          });

        if (!stages.length) return;

        ScrollTrigger.refresh();
      });
  }

  function start() {
    const pending = [];

    if (document.fonts && document.fonts.status !== "loaded") {
      pending.push(document.fonts.ready);
    }

    document
      .querySelectorAll(".js-animation-scroll-marquee img")
      .forEach((image) => {
        if (image.complete) return;
        pending.push(
          new Promise((resolve) => {
            image.addEventListener("load", resolve, { once: true });
            image.addEventListener("error", resolve, { once: true });
          }),
        );
      });

    if (!pending.length) {
      init();
      return;
    }

    let booted = false;
    const boot = () => {
      if (booted) {
        relayout();
        return;
      }
      booted = true;
      init();
    };

    const timer = window.setTimeout(boot, 1200);
    Promise.all(pending).then(() => {
      window.clearTimeout(timer);
      boot();
    });
  }

  if (typeof gsap !== "undefined" && typeof ScrollTrigger !== "undefined") {
    start();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start, { once: true });
  } else {
    start();
  }
})();

<div class="animation-section-pinned-scroll js-animation-section-pinned-scroll">
  <div class="animation-section-pinned-scroll__intro">
    <div class="animation-section-pinned-scroll__scroll-hint">
      <p class="animation-section-pinned-scroll__hint">
        スクロールすると画面が固定され、内容だけが切り替わります
      </p>
      <span class="animation-section-pinned-scroll__arrow" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path
            d="M4 6l4 4 4-4"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </span>
    </div>
  </div>

  <div
    class="animation-section-pinned-scroll__section"
    role="region"
    aria-label="固定スクロールギャラリー"
  >
    <div class="animation-section-pinned-scroll__viewport">
      <div class="animation-section-pinned-scroll__slides">
        <figure class="animation-section-pinned-scroll__slide">
          <div class="animation-section-pinned-scroll__media">
            <img
              class="animation-section-pinned-scroll__image"
              src="/snippets/card-sample-01.jpg"
              alt=""
              width="640"
              height="427"
              decoding="async"
            />
          </div>
          <figcaption class="animation-section-pinned-scroll__body">
            <span class="animation-section-pinned-scroll__index">01</span>
            <span class="animation-section-pinned-scroll__title"
              >タイトル 1</span
            >
            <span class="animation-section-pinned-scroll__text">
              ここに説明テキストが入ります。画面は固定されたまま、次の内容へ切り替わります。
            </span>
          </figcaption>
        </figure>
        <figure class="animation-section-pinned-scroll__slide">
          <div class="animation-section-pinned-scroll__media">
            <img
              class="animation-section-pinned-scroll__image"
              src="/snippets/card-sample-02.jpg"
              alt=""
              width="640"
              height="427"
              decoding="async"
            />
          </div>
          <figcaption class="animation-section-pinned-scroll__body">
            <span class="animation-section-pinned-scroll__index">02</span>
            <span class="animation-section-pinned-scroll__title"
              >タイトル 2</span
            >
            <span class="animation-section-pinned-scroll__text">
              ここに説明テキストが入ります。画像とテキストを差し替えて物語を進められます。
            </span>
          </figcaption>
        </figure>
        <figure class="animation-section-pinned-scroll__slide">
          <div class="animation-section-pinned-scroll__media">
            <img
              class="animation-section-pinned-scroll__image"
              src="/snippets/card-sample-03.jpg"
              alt=""
              width="640"
              height="427"
              decoding="async"
            />
          </div>
          <figcaption class="animation-section-pinned-scroll__body">
            <span class="animation-section-pinned-scroll__index">03</span>
            <span class="animation-section-pinned-scroll__title"
              >タイトル 3</span
            >
            <span class="animation-section-pinned-scroll__text">
              ここに説明テキストが入ります。固定フレームの中で次のシーンへフェードします。
            </span>
          </figcaption>
        </figure>
        <figure class="animation-section-pinned-scroll__slide">
          <div class="animation-section-pinned-scroll__media">
            <img
              class="animation-section-pinned-scroll__image"
              src="/snippets/card-sample-04.jpg"
              alt=""
              width="640"
              height="427"
              decoding="async"
            />
          </div>
          <figcaption class="animation-section-pinned-scroll__body">
            <span class="animation-section-pinned-scroll__index">04</span>
            <span class="animation-section-pinned-scroll__title"
              >タイトル 4</span
            >
            <span class="animation-section-pinned-scroll__text">
              ここに説明テキストが入ります。最後まで進むと固定が解除されます。
            </span>
          </figcaption>
        </figure>
      </div>
      <ol
        class="animation-section-pinned-scroll__progress"
        aria-hidden="true"
      ></ol>
    </div>
  </div>

  <div class="animation-section-pinned-scroll__outro"></div>
</div>

<script src="https://unpkg.com/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

/* GSAP と ScrollTrigger を CDN から読み込んでください（HTML 内 script 参照）。 */

/* --animation-viewport-height でピン留めする領域の高さを変更できます。 */

/* 本番で画面全体を固定する場合は 100vh を指定してください。 */

/* --animation-media-aspect-ratio で画像の比率を変更できます。 */

/* --animation-content-width でコンテンツ幅を変更できます。 */

/* 進捗ドットは script.js がスライド数に合わせて生成します。 */

/* reset */
:where(.animation-section-pinned-scroll) {
  box-sizing: border-box;
}

:where(p).animation-section-pinned-scroll__hint,
:where(figure).animation-section-pinned-scroll__slide,
:where(figcaption).animation-section-pinned-scroll__body,
:where(ol).animation-section-pinned-scroll__progress {
  margin: 0;
}

:where(img).animation-section-pinned-scroll__image {
  display: block;
}

/* snippet */
.animation-section-pinned-scroll {
  --animation-hint-color: #5e6775;
  --animation-caption-color: #1a1f2b;
  --animation-caption-muted: #5e6775;
  --animation-progress-color: #c5cad3;
  --animation-viewport-height: min(400px, 100vh);
  --animation-content-width: 960px;
  --animation-media-aspect-ratio: 3 / 2;
  --animation-media-radius: 12px;

  width: 100%;
  color: var(--animation-caption-color);
}

.animation-section-pinned-scroll__intro {
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: 24px;
}

.animation-section-pinned-scroll__outro {
  display: grid;
  place-items: center;
  min-height: max(400px, calc(100vh - var(--animation-viewport-height)));
  padding: 24px;
}

.animation-section-pinned-scroll__scroll-hint {
  display: grid;
  row-gap: 8px;
  justify-items: center;
  color: var(--animation-hint-color);
}

.animation-section-pinned-scroll__hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--animation-hint-color);
  text-align: center;
}

.animation-section-pinned-scroll__arrow {
  display: grid;
  animation: animation-section-pinned-scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes animation-section-pinned-scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.animation-section-pinned-scroll__section {
  width: 100%;
}

.animation-section-pinned-scroll__viewport {
  position: relative;
  width: 100%;
  max-width: var(--animation-content-width);
  padding-inline: 24px;
  margin-inline: auto;
}

.animation-section-pinned-scroll__slides {
  display: grid;
  row-gap: 24px;
}

.animation-section-pinned-scroll__slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  overflow: hidden;
  color: var(--animation-caption-color);

  @media (width >= 480px) {
    grid-template-columns: minmax(0, 1.2fr) minmax(160px, 1fr);
    align-items: center;
    min-height: var(--animation-viewport-height);
  }
}

.animation-section-pinned-scroll__media {
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--animation-media-aspect-ratio);
  overflow: hidden;
  border-radius: var(--animation-media-radius);
}

.animation-section-pinned-scroll__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animation-section-pinned-scroll__body {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 16px 24px 24px;

  @media (width >= 480px) {
    align-content: center;
    padding: 24px;
  }
}

.animation-section-pinned-scroll__index {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.animation-section-pinned-scroll__title {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.animation-section-pinned-scroll__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--animation-caption-muted);
}

.animation-section-pinned-scroll__progress {
  display: none;
  padding: 0;
  list-style: none;
}

.js-animation-section-pinned-scroll--active
  .animation-section-pinned-scroll__viewport {
  position: sticky;
  top: max(0px, calc((100% - var(--animation-viewport-height)) / 2));
  display: grid;
  min-height: 0;
  overflow: hidden;

  @media (width >= 480px) {
    height: var(--animation-viewport-height);
  }
}

.js-animation-section-pinned-scroll--active
  .animation-section-pinned-scroll__slides {
  display: grid;
  grid-area: 1 / 1;
  grid-template: 1fr / 1fr;
  row-gap: 0;
  min-height: 0;

  @media (width >= 480px) {
    height: 100%;
  }
}

.js-animation-section-pinned-scroll--active
  .animation-section-pinned-scroll__slide {
  visibility: hidden;
  grid-area: 1 / 1;
  min-height: 0;
  pointer-events: none;
  opacity: 0;

  @media (width >= 480px) {
    height: 100%;
  }
}

.js-animation-section-pinned-scroll--active
  .js-animation-section-pinned-scroll__slide--current {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.js-animation-section-pinned-scroll--active
  .animation-section-pinned-scroll__body {
  padding-block-end: 40px;

  @media (width >= 480px) {
    padding-block-end: 24px;
    padding-inline-end: 40px;
  }
}

.js-animation-section-pinned-scroll--active
  .animation-section-pinned-scroll__progress {
  z-index: 2;
  display: grid;
  grid-area: 1 / 1;
  grid-auto-flow: column;
  column-gap: 8px;
  place-self: end center;
  min-width: 0;
  margin-block-end: 16px;

  @media (width >= 480px) {
    grid-auto-rows: max-content;
    grid-auto-flow: row;
    row-gap: 8px;
    place-self: center end;
    margin-block-end: 0;
    margin-inline-end: 16px;
  }
}

.animation-section-pinned-scroll__progress-item {
  width: 6px;
  height: 6px;
  background-color: var(--animation-progress-color);
  border-radius: 999px;
}

.js-animation-section-pinned-scroll__progress-item--current {
  width: 16px;
  background-color: var(--animation-caption-color);

  @media (width >= 480px) {
    width: 6px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js-animation-section-pinned-scroll--active
    .animation-section-pinned-scroll__slide {
    transition:
      opacity 0.45s ease,
      visibility 0.45s ease;
  }

  .js-animation-section-pinned-scroll--active
    .animation-section-pinned-scroll__progress-item {
    transition:
      width 0.35s ease,
      height 0.35s ease,
      background-color 0.35s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animation-section-pinned-scroll__arrow {
    animation: none;
  }
}

(function () {
  var SLIDE_CURRENT_CLASS =
    "js-animation-section-pinned-scroll__slide--current";
  var PROGRESS_ITEM_CLASS = "animation-section-pinned-scroll__progress-item";
  var PROGRESS_CURRENT_CLASS =
    "js-animation-section-pinned-scroll__progress-item--current";

  function getScroller(root) {
    var overflowY = getComputedStyle(root).overflowY;
    return overflowY === "auto" || overflowY === "scroll"
      ? root
      : document.documentElement;
  }

  function getScrollerHeight(scroller) {
    if (scroller === document.documentElement || scroller === document.body) {
      return window.innerHeight;
    }
    return scroller.clientHeight;
  }

  function init() {
    if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
      return;
    }

    gsap.registerPlugin(ScrollTrigger);

    var reducedMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;

    document
      .querySelectorAll(".js-animation-section-pinned-scroll")
      .forEach(function (root) {
        if (root.dataset.animationSectionPinnedScrollInit) return;
        root.dataset.animationSectionPinnedScrollInit = "true";

        var section = root.querySelector(
          ".animation-section-pinned-scroll__section",
        );
        var viewport = root.querySelector(
          ".animation-section-pinned-scroll__viewport",
        );
        var slides = Array.from(
          root.querySelectorAll(".animation-section-pinned-scroll__slide"),
        );
        var progress = root.querySelector(
          ".animation-section-pinned-scroll__progress",
        );
        if (!section || !viewport || slides.length < 2) return;

        if (reducedMotion) return;

        root.classList.add("js-animation-section-pinned-scroll--active");

        var scroller = getScroller(root);
        var outro = root.querySelector(
          ".animation-section-pinned-scroll__outro",
        );
        var progressItems = [];
        var current = -1;
        var travel = 0;

        if (progress) {
          progress.replaceChildren();
          slides.forEach(function () {
            var item = document.createElement("li");
            item.className = PROGRESS_ITEM_CLASS;
            progress.appendChild(item);
            progressItems.push(item);
          });
        }

        function setCurrent(index) {
          if (index === current) return;
          current = index;
          slides.forEach(function (slide, i) {
            var isCurrent = i === index;
            slide.classList.toggle(SLIDE_CURRENT_CLASS, isCurrent);
            if (isCurrent) {
              slide.removeAttribute("aria-hidden");
            } else {
              slide.setAttribute("aria-hidden", "true");
            }
          });
          progressItems.forEach(function (item, i) {
            item.classList.toggle(PROGRESS_CURRENT_CLASS, i === index);
          });
        }

        function layout() {
          var viewportH = viewport.offsetHeight;
          var scrollerH = getScrollerHeight(scroller);
          var topOffset = Math.max(0, (scrollerH - viewportH) / 2);
          travel = Math.max(viewportH, 240) * slides.length;
          var nextHeight = viewportH + travel + "px";
          if (section.style.height !== nextHeight) {
            section.style.height = nextHeight;
          }
          viewport.style.top = topOffset + "px";

          if (outro) {
            outro.style.minHeight = Math.max(400, topOffset + 1) + "px";
          }
        }

        setCurrent(0);
        layout();
        ScrollTrigger.addEventListener("refreshInit", layout);

        ScrollTrigger.create({
          trigger: viewport,
          scroller: scroller,
          start: "center center",
          end: function () {
            return "+=" + travel;
          },
          invalidateOnRefresh: true,
          onUpdate: function (self) {
            var index = Math.min(
              slides.length - 1,
              Math.floor(self.progress * slides.length),
            );
            setCurrent(index);
          },
        });
      });

    ScrollTrigger.refresh();
  }

  if (typeof gsap !== "undefined" && typeof ScrollTrigger !== "undefined") {
    init();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();

<div class="animation-scroll-zoom js-animation-scroll-zoom">
  <div class="animation-scroll-zoom__intro">
    <div class="animation-scroll-zoom__scroll-hint">
      <p class="animation-scroll-zoom__hint">
        スクロールすると画像が近づき、中央にテキストが表示されます
      </p>
      <span class="animation-scroll-zoom__arrow" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path
            d="M4 6l4 4 4-4"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </span>
    </div>
  </div>

  <div
    class="animation-scroll-zoom__section"
    role="region"
    aria-label="スクロールで近づく画像"
  >
    <div class="animation-scroll-zoom__viewport">
      <div class="animation-scroll-zoom__stage">
        <div class="animation-scroll-zoom__media">
          <img
            class="animation-scroll-zoom__image"
            src="/snippets/card-sample-01-lg.jpg"
            alt=""
            width="640"
            height="640"
            decoding="async"
          />
        </div>
        <div class="animation-scroll-zoom__overlay" aria-hidden="true"></div>
        <div class="animation-scroll-zoom__copy">
          <p class="animation-scroll-zoom__title">ここにタイトル</p>
          <p class="animation-scroll-zoom__text">
            スクロールに合わせて画像が近づき、中央にメッセージが現れます。
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="animation-scroll-zoom__outro"></div>
</div>

<script src="https://unpkg.com/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

/* GSAP と ScrollTrigger を CDN から読み込んでください（HTML 内 script 参照）。 */

/* --animation-viewport-height でピン留めする領域の高さを変更できます。 */

/* 100vh はスクロールする枠の高さとして扱います。 */

/* --animation-media-width と --animation-media-max-width で開始時の正方形サイズを変更できます。 */

/* --animation-scale-from で開始時の縮小率を変更できます。終了時は画面いっぱいに長方形で広がります。 */

/* --animation-hold でテキスト表示後に画面を固定するスクロール量（画面高さの倍数）を変更できます。 */

/* --animation-overlay で画像上のオーバーレイの色と濃さ（アルファ）を変更できます。 */

/* reset */
:where(.animation-scroll-zoom) {
  box-sizing: border-box;
}

:where(p).animation-scroll-zoom__hint,
:where(p).animation-scroll-zoom__title,
:where(p).animation-scroll-zoom__text {
  margin: 0;
}

:where(img).animation-scroll-zoom__image {
  display: block;
}

/* snippet */
.animation-scroll-zoom {
  --animation-background: #fff;
  --animation-hint-color: #5e6775;
  --animation-copy-color: #fff;
  --animation-overlay: rgb(28 22 14 / 42%);
  --animation-viewport-height: 100vh;
  --animation-media-width: 58%;
  --animation-media-max-width: 640px;
  --animation-media-aspect-ratio: 1 / 1;
  --animation-media-radius: 8px;
  --animation-scale-from: 0.72;
  --animation-hold: 1;

  width: 100%;
  color: var(--animation-hint-color);
  background-color: var(--animation-background);
}

.animation-scroll-zoom__intro {
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: 24px;
}

.animation-scroll-zoom__outro {
  display: grid;
  place-items: center;
  min-height: max(400px, calc(100vh - var(--animation-viewport-height)));
  padding: 24px;
}

.animation-scroll-zoom__scroll-hint {
  display: grid;
  row-gap: 8px;
  justify-items: center;
  color: var(--animation-hint-color);
}

.animation-scroll-zoom__hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--animation-hint-color);
  text-align: center;
}

.animation-scroll-zoom__arrow {
  display: grid;
  animation: animation-scroll-zoom-bounce 1.6s ease-in-out infinite;
}

@keyframes animation-scroll-zoom-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.animation-scroll-zoom__section {
  width: 100%;
}

.animation-scroll-zoom__viewport {
  position: relative;
  width: 100%;
  min-height: var(--animation-viewport-height);
  overflow: hidden;
  background-color: var(--animation-background);
}

.animation-scroll-zoom__stage {
  display: grid;
  grid-template: 1fr / 1fr;
  min-height: var(--animation-viewport-height);
  overflow: hidden;
}

.animation-scroll-zoom__media {
  z-index: 0;
  grid-area: 1 / 1;
  place-self: center;
  width: min(var(--animation-media-width), var(--animation-media-max-width));
  aspect-ratio: var(--animation-media-aspect-ratio);
  overflow: hidden;
  border-radius: var(--animation-media-radius);
  box-shadow: 0 24px 48px rgb(70 50 20 / 14%);
}

.animation-scroll-zoom__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animation-scroll-zoom__overlay {
  z-index: 1;
  grid-area: 1 / 1;
  place-self: stretch;
  pointer-events: none;
  background-color: var(--animation-overlay);
}

.animation-scroll-zoom__copy {
  z-index: 2;
  display: grid;
  grid-area: 1 / 1;
  gap: 8px;
  place-content: center;
  place-self: stretch;
  justify-items: stretch;
  min-width: 0;
  padding: 24px;
  color: var(--animation-copy-color);
  text-align: center;
}

.animation-scroll-zoom__title {
  min-width: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 16px rgb(0 0 0 / 28%);
}

.animation-scroll-zoom__text {
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 10px rgb(0 0 0 / 32%);
}

.js-animation-scroll-zoom--active .animation-scroll-zoom__viewport {
  position: sticky;
  top: 0;
  height: var(--animation-viewport-height);
  min-height: 0;
}

.js-animation-scroll-zoom--active .animation-scroll-zoom__stage {
  height: 100%;
  min-height: 0;
}

.js-animation-scroll-zoom--active .animation-scroll-zoom__media {
  aspect-ratio: auto;
}

.js-animation-scroll-zoom--active .animation-scroll-zoom__overlay,
.js-animation-scroll-zoom--active .animation-scroll-zoom__copy {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .animation-scroll-zoom__arrow {
    animation: none;
  }

  .animation-scroll-zoom__media {
    place-self: stretch;
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
}

(function () {
  function getScroller(root) {
    var overflowY = getComputedStyle(root).overflowY;
    return overflowY === "auto" || overflowY === "scroll"
      ? root
      : document.documentElement;
  }

  function getScrollerHeight(scroller) {
    if (scroller === document.documentElement || scroller === document.body) {
      return document.documentElement.clientHeight || window.innerHeight;
    }
    return scroller.clientHeight;
  }

  function readNumber(root, name, fallback) {
    var value = parseFloat(getComputedStyle(root).getPropertyValue(name));
    return Number.isFinite(value) ? value : fallback;
  }

  function clamp(value, min, max) {
    return Math.min(max, Math.max(min, value));
  }

  function lerp(start, end, progress) {
    return start + (end - start) * progress;
  }

  function init() {
    if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
      return;
    }

    gsap.registerPlugin(ScrollTrigger);

    var reducedMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;

    document
      .querySelectorAll(".js-animation-scroll-zoom")
      .forEach(function (root) {
        if (root.dataset.animationScrollZoomInit) return;
        root.dataset.animationScrollZoomInit = "true";

        var section = root.querySelector(".animation-scroll-zoom__section");
        var viewport = root.querySelector(".animation-scroll-zoom__viewport");
        var media = root.querySelector(".animation-scroll-zoom__media");
        var overlay = root.querySelector(".animation-scroll-zoom__overlay");
        var copy = root.querySelector(".animation-scroll-zoom__copy");
        if (!section || !viewport || !media || !overlay || !copy) return;

        if (reducedMotion) return;

        root.classList.add("js-animation-scroll-zoom--active");

        var scroller = getScroller(root);
        var travel = 0;
        var expandDuration = 1;
        var overlayDuration = 0.35;
        var copyDuration = 0.28;
        // duration 1 = 画面高さ 2 倍。--animation-hold は最初から画面高さの倍数。
        var viewportScrollPerDuration = 2;

        var radiusPx = 8;
        var startSize = 1;
        var endWidth = 1;
        var endHeight = 1;
        var expandScroll = expandDuration * viewportScrollPerDuration;
        var overlayScroll = overlayDuration * viewportScrollPerDuration;
        var copyScroll = copyDuration * viewportScrollPerDuration;
        var totalScroll = expandScroll + Math.max(overlayScroll, copyScroll);

        function cacheLayout() {
          var percent = readNumber(root, "--animation-media-width", 58);
          var maxWidth = readNumber(root, "--animation-media-max-width", 640);
          var scaleFrom = readNumber(root, "--animation-scale-from", 0.72);
          var size = Math.min(viewport.clientWidth * (percent / 100), maxWidth);

          radiusPx =
            parseFloat(
              getComputedStyle(root).getPropertyValue(
                "--animation-media-radius",
              ),
            ) || 8;
          startSize = Math.max(1, size * scaleFrom);
          endWidth = viewport.clientWidth;
          endHeight = viewport.clientHeight;
          expandScroll = expandDuration * viewportScrollPerDuration;
          overlayScroll = overlayDuration * viewportScrollPerDuration;
          copyScroll = copyDuration * viewportScrollPerDuration;
          totalScroll =
            expandScroll +
            Math.max(overlayScroll, copyScroll) +
            Math.max(0, readNumber(root, "--animation-hold", 1));
        }

        function getViewportHeight() {
          var scrollerH = getScrollerHeight(scroller);
          var raw = getComputedStyle(root)
            .getPropertyValue("--animation-viewport-height")
            .trim();

          if (!raw || /^100(?:dv|sv|lv)?vh$/i.test(raw)) {
            return scrollerH;
          }

          viewport.style.height = raw;
          var px = viewport.getBoundingClientRect().height;
          return px > 0 ? px : scrollerH;
        }

        function applyProgress(progress) {
          var pos = clamp(progress, 0, 1) * totalScroll;
          var expandP = clamp(pos / expandScroll, 0, 1);

          gsap.set(media, {
            width: lerp(startSize, endWidth, expandP),
            height: lerp(startSize, endHeight, expandP),
            borderRadius: lerp(radiusPx, 0, expandP),
          });

          var afterExpand = pos - expandScroll;
          var overlayP =
            afterExpand < 0 ? 0 : clamp(afterExpand / overlayScroll, 0, 1);
          var copyP =
            afterExpand < 0 ? 0 : clamp(afterExpand / copyScroll, 0, 1);

          gsap.set(overlay, { opacity: overlayP });
          gsap.set(copy, { opacity: copyP, y: lerp(20, 0, copyP) });
        }

        function layout() {
          var viewportH = getViewportHeight();
          viewport.style.height = viewportH + "px";
          viewport.style.top = "0px";
          cacheLayout();
          var unit = Math.max(viewportH, 240);
          travel = unit * totalScroll;
          var nextHeight = viewportH + travel + "px";
          if (section.style.height !== nextHeight) {
            section.style.height = nextHeight;
          }
        }

        layout();
        applyProgress(0);

        ScrollTrigger.create({
          trigger: section,
          scroller: scroller,
          start: "top top",
          end: "bottom bottom",
          scrub: true,
          invalidateOnRefresh: true,
          onRefreshInit: layout,
          onUpdate: function (self) {
            applyProgress(self.progress);
          },
          onRefresh: function (self) {
            applyProgress(self.progress);
          },
        });
      });

    ScrollTrigger.refresh();
  }

  if (typeof gsap !== "undefined" && typeof ScrollTrigger !== "undefined") {
    init();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();

<div class="animation-stack-cards js-animation-stack-cards">
  <div class="animation-stack-cards__intro">
    <div class="animation-stack-cards__scroll-hint">
      <p class="animation-stack-cards__hint">
        <span class="animation-stack-cards__hint-motion">
          スクロールすると、カードが下から重なっていきます
        </span>
        <span class="animation-stack-cards__hint-static">
          カードを上から順にご覧ください
        </span>
      </p>
      <span class="animation-stack-cards__arrow" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path
            d="M4 6l4 4 4-4"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </span>
    </div>
  </div>

  <div
    class="animation-stack-cards__section"
    role="region"
    aria-label="カード一覧"
    data-label-motion="下から重なるカード"
  >
    <div class="animation-stack-cards__list">
      <article class="animation-stack-cards__card">
        <div class="animation-stack-cards__inner">
          <div class="animation-stack-cards__body">
            <p class="animation-stack-cards__index">01</p>
            <p class="animation-stack-cards__label">カテゴリ</p>
            <h3 class="animation-stack-cards__title">タイトル 1</h3>
            <p class="animation-stack-cards__lead">
              リード文が入ります。サービスの特徴を一言で伝えます。
            </p>
            <p class="animation-stack-cards__text">
              <span class="animation-stack-cards__copy-motion">
                ここに説明テキストが入ります。スクロールに合わせて次のカードが下から重なります。見出しや本文は、掲載したい内容に差し替えて使えます。
              </span>
              <span class="animation-stack-cards__copy-static">
                ここに説明テキストが入ります。見出しや本文は、掲載したい内容に差し替えて使えます。
              </span>
            </p>
          </div>
          <div class="animation-stack-cards__media">
            <img
              class="animation-stack-cards__image"
              src="/snippets/card-sample-01.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
        </div>
      </article>
      <article class="animation-stack-cards__card">
        <div class="animation-stack-cards__inner">
          <div class="animation-stack-cards__body">
            <p class="animation-stack-cards__index">02</p>
            <p class="animation-stack-cards__label">カテゴリ</p>
            <h3 class="animation-stack-cards__title">タイトル 2</h3>
            <p class="animation-stack-cards__lead">
              <span class="animation-stack-cards__copy-motion">
                リード文が入ります。次のカードが下から重なる様子が分かります。
              </span>
              <span class="animation-stack-cards__copy-static">
                リード文が入ります。各カードの内容を順にご覧ください。
              </span>
            </p>
            <p class="animation-stack-cards__text">
              <span class="animation-stack-cards__copy-motion">
                ここに説明テキストが入ります。前面のカードが下から重なります。画像とテキストの比率は
                1:1 なので、写真の印象を保ったまま説明を置けます。
              </span>
              <span class="animation-stack-cards__copy-static">
                ここに説明テキストが入ります。画像とテキストの比率は 1:1
                なので、写真の印象を保ったまま説明を置けます。
              </span>
            </p>
          </div>
          <div class="animation-stack-cards__media">
            <img
              class="animation-stack-cards__image"
              src="/snippets/card-sample-02.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
        </div>
      </article>
      <article class="animation-stack-cards__card">
        <div class="animation-stack-cards__inner">
          <div class="animation-stack-cards__body">
            <p class="animation-stack-cards__index">03</p>
            <p class="animation-stack-cards__label">カテゴリ</p>
            <h3 class="animation-stack-cards__title">タイトル 3</h3>
            <p class="animation-stack-cards__lead">
              リード文が入ります。カードの枚数は増減できます。
            </p>
            <p class="animation-stack-cards__text">
              ここに説明テキストが入ります。カードの枚数や内容は差し替えて使えます。番号・カテゴリ・タイトル・リード・本文の順で情報を並べています。
            </p>
          </div>
          <div class="animation-stack-cards__media">
            <img
              class="animation-stack-cards__image"
              src="/snippets/card-sample-03.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
        </div>
      </article>
      <article class="animation-stack-cards__card">
        <div class="animation-stack-cards__inner">
          <div class="animation-stack-cards__body">
            <p class="animation-stack-cards__index">04</p>
            <p class="animation-stack-cards__label">カテゴリ</p>
            <h3 class="animation-stack-cards__title">タイトル 4</h3>
            <p class="animation-stack-cards__lead">
              <span class="animation-stack-cards__copy-motion">
                リード文が入ります。最後まで進むと固定が解除されます。
              </span>
              <span class="animation-stack-cards__copy-static">
                リード文が入ります。最後のカードです。
              </span>
            </p>
            <p class="animation-stack-cards__text">
              <span class="animation-stack-cards__copy-motion">
                ここに説明テキストが入ります。最後のカードまで進むと固定が解除されます。続きのセクションへ自然につなげられます。
              </span>
              <span class="animation-stack-cards__copy-static">
                ここに説明テキストが入ります。カードの枚数や内容は差し替えて使えます。続きのセクションへ自然につなげられます。
              </span>
            </p>
          </div>
          <div class="animation-stack-cards__media">
            <img
              class="animation-stack-cards__image"
              src="/snippets/card-sample-04.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
        </div>
      </article>
    </div>
  </div>

  <div class="animation-stack-cards__outro"></div>
</div>

<script src="https://unpkg.com/gsap@3.15.0/dist/gsap.min.js"></script>

/* GSAP を CDN から読み込んでください（HTML 内 script 参照）。重ねる動きは CSS sticky です。 */

/* 480px 未満では sticky せず、カードを縦に並べます。 */

/* --animation-content-width でカード列の幅を変更できます。 */

/* --animation-stack-top でカードが張り付く位置を変更できます。 */

/* --animation-card-height でデスクトップ時のカードの最小高さを変更できます。重ね表示時は JS が全カードを同じ高さに揃えます。 */

/* タイトル・本文の font-size は clamp() でウィンドウ幅に合わせて変わります。 */

/* reset */
:where(.animation-stack-cards) {
  box-sizing: border-box;
}

:where(p).animation-stack-cards__hint,
:where(p).animation-stack-cards__index,
:where(p).animation-stack-cards__label,
:where(p).animation-stack-cards__lead,
:where(p).animation-stack-cards__text,
:where(h3).animation-stack-cards__title {
  margin: 0;
  font: inherit;
}

:where(img).animation-stack-cards__image {
  display: block;
}

/* snippet */
.animation-stack-cards {
  --animation-background: #fff;
  --animation-hint-color: #5e6775;
  --animation-card-background: #fff;
  --animation-card-border: #e7e7e7;
  --animation-title-color: #364153;
  --animation-text-color: #5e6775;
  --animation-content-width: 96%;
  --animation-card-radius: 16px;
  --animation-stack-top: 24px;
  --animation-card-height: min(
    560px,
    calc(100vh - var(--animation-stack-top) - 32px)
  );

  width: 100%;
  color: var(--animation-title-color);
  background-color: var(--animation-background);
}

.animation-stack-cards__intro {
  display: none;
  place-items: center;
  min-height: 400px;
  padding: 24px;
}

.animation-stack-cards__outro {
  display: none;
  place-items: center;
  min-height: 400px;
  padding: 24px;
}

.animation-stack-cards__scroll-hint {
  display: grid;
  row-gap: 8px;
  justify-items: center;
  color: var(--animation-hint-color);
}

.animation-stack-cards__hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--animation-hint-color);
  text-align: center;
}

/* motion 用コピーは JS が --active を付けたときだけ出す（GSAP 必須の既存方針）。 */
.animation-stack-cards__hint-motion,
.animation-stack-cards__copy-motion {
  display: none;
}

.js-animation-stack-cards--active .animation-stack-cards__hint-motion,
.js-animation-stack-cards--active .animation-stack-cards__copy-motion {
  display: inline;
}

.js-animation-stack-cards--active .animation-stack-cards__hint-static,
.js-animation-stack-cards--active .animation-stack-cards__copy-static {
  display: none;
}

.animation-stack-cards__arrow {
  display: grid;
  animation: animation-stack-cards-bounce 1.6s ease-in-out infinite;
}

@keyframes animation-stack-cards-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.animation-stack-cards__section {
  width: 100%;
}

.animation-stack-cards__list {
  display: grid;
  gap: 24px;
  width: var(--animation-content-width);
  margin-inline: auto;
}

.animation-stack-cards__card {
  width: 100%;
  min-width: 0;
}

.animation-stack-cards__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background-color: var(--animation-card-background);
  border: 1px solid var(--animation-card-border);
  border-radius: var(--animation-card-radius);
  box-shadow: 0 16px 40px rgb(26 31 43 / 10%);
}

.animation-stack-cards__media {
  order: -1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.animation-stack-cards__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animation-stack-cards__body {
  display: grid;
  align-content: start;
  min-height: min-content;
  padding: 20px 24px 24px;
}

.animation-stack-cards__index {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: var(--animation-title-color);
  letter-spacing: 0.02em;
}

.animation-stack-cards__label {
  margin-top: 12px;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 600;
  color: var(--animation-text-color);
  letter-spacing: 0.08em;
}

.animation-stack-cards__title {
  margin-top: 8px;
  font-size: clamp(20px, 2.6vw, 44px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--animation-title-color);
}

.animation-stack-cards__lead {
  margin-top: 8px;
  font-size: clamp(14px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--animation-title-color);
}

.animation-stack-cards__text {
  margin-top: 8px;
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--animation-text-color);
}

@media (width >= 480px) {
  .animation-stack-cards__intro,
  .animation-stack-cards__outro {
    display: grid;
  }

  .animation-stack-cards__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .animation-stack-cards__media {
    order: 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  .animation-stack-cards__body {
    align-content: center;
    padding: clamp(24px, 3.2vw, 48px);
  }

  .animation-stack-cards__label {
    margin-top: 16px;
  }

  .animation-stack-cards__lead,
  .animation-stack-cards__text {
    margin-top: 12px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .js-animation-stack-cards--active .animation-stack-cards__list {
      gap: 0;
    }

    .js-animation-stack-cards--active .animation-stack-cards__card {
      position: sticky;
      top: var(--animation-stack-top);
    }

    .js-animation-stack-cards--active .animation-stack-cards__inner {
      min-height: var(--animation-card-height);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .animation-stack-cards__intro {
    min-height: 0;
  }

  .animation-stack-cards__outro {
    display: none;
  }

  .animation-stack-cards__arrow {
    animation: none;
  }
}

(function () {
  /* 重ね表示は CSS sticky。GSAP は matchMedia のクラス切り替えのみ。 */
  /* style.css の 480px と揃える。未満では sticky なし。 */
  var DESKTOP_MIN_WIDTH = 480;

  function equalizeCardHeights(cards) {
    var inners = cards
      .map(function (card) {
        return card.querySelector(".animation-stack-cards__inner");
      })
      .filter(Boolean);
    var images = [];
    var cancelled = false;
    var rafId = 0;

    function apply() {
      if (cancelled) return;

      inners.forEach(function (el) {
        el.style.minHeight = "";
      });

      var max = 0;
      inners.forEach(function (el) {
        max = Math.max(max, el.offsetHeight);
      });

      inners.forEach(function (el) {
        el.style.minHeight = max + "px";
      });
    }

    function scheduleApply() {
      if (cancelled || rafId) return;
      rafId = requestAnimationFrame(function () {
        rafId = 0;
        apply();
      });
    }

    apply();
    window.addEventListener("resize", scheduleApply, { passive: true });

    if (document.fonts && document.fonts.ready) {
      document.fonts.ready.then(scheduleApply);
    }

    cards.forEach(function (card) {
      card.querySelectorAll("img").forEach(function (img) {
        images.push(img);
        if (!img.complete) {
          img.addEventListener("load", scheduleApply);
        }
      });
    });

    return function () {
      cancelled = true;
      if (rafId) {
        cancelAnimationFrame(rafId);
        rafId = 0;
      }
      window.removeEventListener("resize", scheduleApply);
      images.forEach(function (img) {
        img.removeEventListener("load", scheduleApply);
      });
      inners.forEach(function (el) {
        el.style.minHeight = "";
      });
    };
  }

  function init() {
    if (typeof gsap === "undefined") {
      return;
    }

    document
      .querySelectorAll(".js-animation-stack-cards")
      .forEach(function (root) {
        if (root.dataset.animationStackCardsInit) return;
        root.dataset.animationStackCardsInit = "true";

        var cards = Array.from(
          root.querySelectorAll(".animation-stack-cards__card"),
        );
        if (cards.length < 2) return;

        var section = root.querySelector(".animation-stack-cards__section");
        var labelStatic = section ? section.getAttribute("aria-label") : "";
        var labelMotion =
          section && section.getAttribute("data-label-motion")
            ? section.getAttribute("data-label-motion")
            : labelStatic;

        var mm = gsap.matchMedia();

        mm.add(
          {
            isDesktop: "(min-width: " + DESKTOP_MIN_WIDTH + "px)",
            reduceMotion: "(prefers-reduced-motion: reduce)",
          },
          function (context) {
            if (
              !context.conditions.isDesktop ||
              context.conditions.reduceMotion
            ) {
              return;
            }

            root.classList.add("js-animation-stack-cards--active");
            if (section && labelMotion) {
              section.setAttribute("aria-label", labelMotion);
            }

            var revertHeights = equalizeCardHeights(cards);

            return function () {
              revertHeights();
              root.classList.remove("js-animation-stack-cards--active");
              if (section && labelStatic) {
                section.setAttribute("aria-label", labelStatic);
              }
            };
          },
        );
      });
  }

  if (typeof gsap !== "undefined") {
    init();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();

<div class="animation-scroll-circles js-animation-scroll-circles">
  <div class="animation-scroll-circles__intro">
    <div class="animation-scroll-circles__scroll-hint">
      <p class="animation-scroll-circles__hint">
        スクロールすると、左の円から時計回りに描画されます
      </p>
      <span class="animation-scroll-circles__arrow" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path
            d="M4 6l4 4 4-4"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </span>
    </div>
  </div>

  <div
    class="animation-scroll-circles__section"
    role="region"
    aria-label="スクロールで描画される円"
  >
    <div class="animation-scroll-circles__stage">
      <div class="animation-scroll-circles__rings" aria-hidden="true">
        <svg
          class="animation-scroll-circles__ring animation-scroll-circles__ring--left"
          viewBox="0 0 200 200"
          fill="none"
        >
          <circle
            class="animation-scroll-circles__circle animation-scroll-circles__circle--left"
            cx="100"
            cy="100"
            r="74"
            transform="rotate(180 100 100)"
          />
        </svg>

        <svg
          class="animation-scroll-circles__ring animation-scroll-circles__ring--right"
          viewBox="0 0 200 200"
          fill="none"
        >
          <circle
            class="animation-scroll-circles__circle animation-scroll-circles__circle--right"
            cx="100"
            cy="100"
            r="74"
          />
        </svg>
      </div>

      <div class="animation-scroll-circles__copy">
        <p class="animation-scroll-circles__catch">Animation scroll circles</p>
        <p class="animation-scroll-circles__title">見出しテキスト</p>
        <p class="animation-scroll-circles__text">
          文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト
        </p>
      </div>
    </div>
  </div>
</div>

<script src="https://unpkg.com/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

/* GSAP と ScrollTrigger を CDN から読み込んでください（HTML 内 script 参照）。 */

/* --animation-ring-left / --animation-ring-right で円の色を変更できます。 */

/* --animation-ring-left-size / --animation-ring-right-size で円の大きさを変更できます。 */

/* --animation-stage-height でセクションの高さを変更できます。 */

/* タイトル・本文の font-size と円の大きさはウィンドウ幅に合わせて変わります。 */

/* reset */
:where(.animation-scroll-circles) {
  box-sizing: border-box;
}

:where(p).animation-scroll-circles__hint,
:where(p).animation-scroll-circles__catch,
:where(p).animation-scroll-circles__title,
:where(p).animation-scroll-circles__text {
  margin: 0;
}

:where(svg).animation-scroll-circles__ring {
  display: block;
}

/* snippet */
.animation-scroll-circles {
  --animation-background: #fff;
  --animation-hint-color: #5e6775;
  --animation-title-color: #1a1f2b;
  --animation-text-color: #5e6775;
  --animation-ring-left: #b7bbf1;
  --animation-ring-right: #6b72f6;
  --animation-ring-left-size: 70vw;
  --animation-ring-right-size: 58vw;
  --animation-stage-height: max(
    min(100vh, var(--animation-ring-left-size)),
    20rem
  );

  width: 100%;
  color: var(--animation-title-color);
  background-color: var(--animation-background);
}

.animation-scroll-circles__intro {
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: 24px;
}

.animation-scroll-circles__scroll-hint {
  display: grid;
  row-gap: 8px;
  justify-items: center;
  color: var(--animation-hint-color);
}

.animation-scroll-circles__hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--animation-hint-color);
  text-align: center;
}

.animation-scroll-circles__arrow {
  display: grid;
  animation: animation-scroll-circles-bounce 1.6s ease-in-out infinite;
}

@keyframes animation-scroll-circles-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.animation-scroll-circles__section {
  width: 100%;
}

.animation-scroll-circles__stage {
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  min-height: var(--animation-stage-height);
  background-color: var(--animation-background);
}

.animation-scroll-circles__rings,
.animation-scroll-circles__copy {
  grid-area: 1 / 1;
}

.animation-scroll-circles__rings {
  z-index: 0;
  display: grid;
  grid-template: 1fr / 1fr;
  place-self: stretch;
  min-height: var(--animation-stage-height);
  overflow: hidden;
  pointer-events: none;
}

.animation-scroll-circles__ring {
  z-index: 0;
  grid-area: 1 / 1;
  width: var(--animation-ring-left-size);
  overflow: visible;
  pointer-events: none;
}

.animation-scroll-circles__ring--left {
  place-self: start start;
  color: var(--animation-ring-left);
  transform: translate(-34%, -36%);
}

.animation-scroll-circles__ring--right {
  place-self: center end;
  width: var(--animation-ring-right-size);
  color: var(--animation-ring-right);
  transform: translate(36%, 4%);
}

.animation-scroll-circles__circle {
  fill: none;
  stroke: currentcolor;
  stroke-width: 22;
  stroke-linecap: butt;
  /* 円周（r=74 で約 465）より大きい値。JS 前のフル表示フラッシュを防ぐ */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.animation-scroll-circles__copy {
  z-index: 1;
  display: grid;
  gap: clamp(8px, 0.8vw, 16px);
  place-content: center;
  place-self: center start;
  width: min(clamp(16rem, 42vw, 48rem), calc(100% - 48px));
  padding-block: clamp(24px, 4vw, 64px);
  margin-left: 8%;
  text-align: left;
  transform: translateY(-12%);
}

.animation-scroll-circles__catch {
  font-size: clamp(28px, 5.5vw, 80px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--animation-title-color);
  letter-spacing: 0.02em;
}

.animation-scroll-circles__title {
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--animation-title-color);
}

.animation-scroll-circles__text {
  max-width: 100%;
  font-size: clamp(13px, 1.4vw, 22px);
  line-height: 1.7;
  color: var(--animation-text-color);
  overflow-wrap: anywhere;
}

@media (width > 960px) {
  .animation-scroll-circles__ring--left {
    transform: translate(-32%, -30%);
  }

  .animation-scroll-circles__ring--right {
    transform: translate(32%, 6%);
  }

  .animation-scroll-circles__copy {
    margin-left: 12%;
    transform: translateY(-20%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animation-scroll-circles__arrow {
    animation: none;
  }

  .animation-scroll-circles__circle {
    stroke-dashoffset: 0;
  }
}

(function () {
  function getScroller(root) {
    var overflowY = getComputedStyle(root).overflowY;
    return overflowY === "auto" || overflowY === "scroll"
      ? root
      : document.documentElement;
  }

  function prepareCircle(circle) {
    var length = circle.getTotalLength();
    if (!length) {
      var radius = parseFloat(circle.getAttribute("r")) || 0;
      length = 2 * Math.PI * radius;
    }
    var overlap = 2;
    var dash = length + overlap;
    circle.style.strokeDasharray = String(dash);
    circle.style.strokeDashoffset = String(dash);
    return dash;
  }

  function init() {
    if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
      return;
    }

    gsap.registerPlugin(ScrollTrigger);

    var reducedMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;

    document
      .querySelectorAll(".js-animation-scroll-circles")
      .forEach(function (root) {
        if (root.dataset.animationScrollCirclesInit) return;
        root.dataset.animationScrollCirclesInit = "true";

        var section = root.querySelector(".animation-scroll-circles__section");
        var left = root.querySelector(
          ".animation-scroll-circles__circle--left",
        );
        var right = root.querySelector(
          ".animation-scroll-circles__circle--right",
        );
        if (!section || !left || !right) return;

        if (reducedMotion) return;

        var scroller = getScroller(root);
        var leftLength = prepareCircle(left);
        var rightLength = prepareCircle(right);
        var played = false;

        function play() {
          if (played) return;
          played = true;

          var timeline = gsap.timeline();
          timeline.fromTo(
            left,
            { strokeDashoffset: leftLength },
            {
              strokeDashoffset: 0,
              duration: 1.35,
              ease: "power1.inOut",
            },
          );
          timeline.fromTo(
            right,
            { strokeDashoffset: rightLength },
            {
              strokeDashoffset: 0,
              duration: 1.35,
              ease: "power1.inOut",
            },
            "-=0.18",
          );
        }

        ScrollTrigger.create({
          trigger: section,
          scroller: scroller,
          start: "top 78%",
          once: true,
          onEnter: play,
        });
      });

    ScrollTrigger.refresh();
  }

  if (typeof gsap !== "undefined" && typeof ScrollTrigger !== "undefined") {
    init();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();