【javascript・gsap】画像の切り替える方法（3本ライン）

私がWebサイト制作でハマった事や良かった方法などを備忘録としてまとめています。

HTML

      <div class="top-kv js-flip">
        <!-- 上 -->
        <img
          src="/img/bg-top-kv1.png"
          width="1366"
          height="685"
          alt="top-kv"
          decoding="async"
          class="js-flip-kv js-flip--kv1 js-flip-part--top"
        />

        <!-- 中 -->
        <img
          src="/img/bg-top-kv1.png"
          width="1366"
          height="685"
          alt=""
          decoding="async"
          class="js-flip-kv js-flip--kv1 js-flip-part--middle"
        />

        <!-- 下 -->
        <img
          src="/img/bg-top-kv1.png"
          width="1366"
          height="685"
          alt=""
          decoding="async"
          class="js-flip-kv js-flip--kv1 js-flip-part--bottom"
        />
</div>

SCSS

.js-flip {
  overflow: hidden;
  position: relative;

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;

    &.js-flip-part--top {
      clip-path: polygon(
        0% 0%,
        100% 0%,
        100% calc(33.33% + 1px),
        0% calc(33.33% + 1px)
      );
    }

    &.js-flip-part--middle {
      clip-path: polygon(
        0% calc(33.33% - 1px),
        100% calc(33.33% - 1px),
        100% calc(66.66% + 1px),
        0% calc(66.66% + 1px)
      );
    }

    &.js-flip-part--bottom {
      clip-path: polygon(
        0% calc(66.66% - 1px),
        100% calc(66.66% - 1px),
        100% 100%,
        0% 100%
      );
    }
  }
}

JavaScript

const tl = gsap.timeline({
  repeat: -1,
  defaults: {
    ease: "power2.inOut",
    duration: 1.2,
  },
});

tl.fromTo(
  ".js-flip-part--top",
  {
    clipPath:
      "polygon(0% 0%, 100% 0%, 100% calc(33.33% + 1px), 0% calc(33.33% + 1px))",
  },
  {
    clipPath:
      "polygon(0% 0%, 0% 0%, 0% calc(33.33% + 1px), 0% calc(33.33% + 1px))",
  },
  "+=1.5",
);

tl.fromTo(
  ".js-flip-part--middle",
  {
    clipPath:
      "polygon(0% calc(33.33% - 1px), 100% calc(33.33% - 1px), 100% calc(66.66% + 1px), 0% calc(66.66% + 1px))",
  },
  {
    clipPath:
      "polygon(100% calc(33.33% - 1px), 100% calc(33.33% - 1px), 100% calc(66.66% + 1px), 100% calc(66.66% + 1px))",
  },
  "<",
);

tl.fromTo(
  ".js-flip-part--bottom",
  {
    clipPath:
      "polygon(0% calc(66.66% - 1px), 100% calc(66.66% - 1px), 100% 100%, 0% 100%)",
  },
  {
    clipPath:
      "polygon(0% calc(66.66% - 1px), 0% calc(66.66% - 1px), 0% 100%, 0% 100%)",
  },
  "<",
);