GSAP Blur Text Reveal on Scroll | Elementor Flexbox Container Tutorial

<!-- GSAP Library CDN Links -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

<!-- Main Animation Script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  gsap.registerPlugin(ScrollTrigger);

  // Function to split text into spans for individual character animation
  function splitTextIntoSpans(selector) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
      const text = element.innerText;
      element.innerHTML = ""; // Clear existing content to avoid duplication
      text.split("").forEach(char => {
        const span = document.createElement("span");
        span.style.display = "inline-block"; // Necessary for transforms
        span.style.opacity = "0";
        span.style.filter = "blur(8px)";
        span.style.transform = "translateX(-100px)";
        // Use a non-breaking space for actual spaces to maintain layout
        span.innerText = char === " " ? "\u00A0" : char; 
        element.appendChild(span);
      });
    });
  }

  // Apply the splitting function to all h4 elements
  // You can change "h4" to any other selector like ".animated-heading"
  splitTextIntoSpans("h4");

  // Animate each h4 element when it scrolls into view
  document.querySelectorAll("h4").forEach(h4 => {
    gsap.fromTo(h4.querySelectorAll("span"), {
      // Initial state (from)
      x: '-100%',
      filter: 'blur(8px)',
      opacity: 0,
    }, {
      // Final state (to)
      x: '0%',
      filter: 'blur(0)',
      opacity: 1,
      duration: 1.5,
      ease: "power4.out",
      stagger: 0.05, // Delay between each character animation
      scrollTrigger: {
        trigger: h4,
        start: "top 90%", // Animation starts when 90% of the viewport top hits the element
        end: "top 20%",   // Ensures animation completes as it scrolls up
        toggleActions: "restart none none reset",
        scrub: 1, // Smoothly scrubs the animation with scroll
        markers: false // Set to true for debugging scroll trigger positions
      },
    });
  });
});
</script>