画像を左から右にリヴィール

v3の画像ウィジットが左から右に表示されるアニメーションを作ります。

1. クラス「anime-reveal」をウィジットにつける

2. 以下のCSSを入れる

HTML

<style>
/* image reveal */
html.js-anime-reveal .anime-reveal .elementor-widget-container {
  overflow: hidden !important;
  will-change: clip-path;
}
</style>

<style>
/* image reveal */
html.js-anime-reveal .anime-reveal .elementor-widget-container {
  overflow: hidden !important;
  will-change: clip-path;
}
</style>

2. 以下のJSを入れる

（このコードの上にGSAP読み込みコードを入れてください。）

HTML

<script>
document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  document.documentElement.classList.add("js-anime-reveal");

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

  // --- anime-reveal ---
  gsap.utils.toArray(".anime-reveal").forEach((container) => {
    const target =
      container.querySelector(".elementor-widget-container") || container;

    if (reduceMotion) {
      gsap.set(target, { clipPath: "inset(0 0% 0 0)" });
      return;
    }

    gsap.set(target, { clipPath: "inset(0 100% 0 0)" });

    gsap.to(target, {
      clipPath: "inset(0 0% 0 0)",
      duration: 0.8,
      delay: 0.2,
      ease: "power3.out",
      force3D: true,
      scrollTrigger: {
        trigger: container,
        start: "top 70%",
        toggleActions: "play none none none",
      },
    });
  });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  document.documentElement.classList.add("js-anime-reveal");

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

  // --- anime-reveal ---
  gsap.utils.toArray(".anime-reveal").forEach((container) => {
    const target =
      container.querySelector(".elementor-widget-container") || container;

    if (reduceMotion) {
      gsap.set(target, { clipPath: "inset(0 0% 0 0)" });
      return;
    }

    gsap.set(target, { clipPath: "inset(0 100% 0 0)" });

    gsap.to(target, {
      clipPath: "inset(0 0% 0 0)",
      duration: 0.8,
      delay: 0.2,
      ease: "power3.out",
      force3D: true,
      scrollTrigger: {
        trigger: container,
        start: "top 70%",
        toggleActions: "play none none none",
      },
    });
  });
});
</script>