import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export const initTextReveal = () => {
  const blocks = document.querySelectorAll<HTMLElement>("[data-text-reveal]");

  blocks.forEach((block) => {
    const section = block.closest("section");

    if (!section) return;

    const lines = block.querySelectorAll<HTMLElement>(".text-line");

    if (!lines.length) return;
    gsap.fromTo(
      lines,
      { clipPath: "inset(0 100% 0 0)" },
      {
        clipPath: "inset(0 0% 0 0)",
        ease: "none",
        stagger: 0.15,
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: "+=200%",
          scrub: 2,
        },
      }
    );
  });
};