Animación para Títulos en Elementor Pro con GSAP | SplitText | greensock

Aprende a crear animaciones llamativas para títulos en Elementor Pro usando GSAP y SplitText. En este tutorial te muestro paso a paso cómo aplicar efectos de texto profesionales con GreenSock, perfectos para darle vida y dinamismo a tu sitio web en WordPress.

Código utilizado:

<!-- estilos -->
<style>
    body:not(.elementor-editor-active) .title-gsap .elementor-heading-title {
        opacity: 0;
    }
</style>

<!-- GSAP y plugins -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<!-- script animación -->
<script>
document.addEventListener("DOMContentLoaded", () => {
    gsap.registerPlugin(SplitText, ScrollTrigger);

    // Selecciona todos los títulos
    const titles = document.querySelectorAll(".title-gsap .elementor-heading-title");

    titles.forEach((title) => {
        // reseteo de estilos
        gsap.set(title, { opacity: 1 });

        // Divide el texto en palabras
        const split = new SplitText(title, { type: "words" });

        // Animación del titulo
        gsap.fromTo(
            split.words,
            { y: 10, opacity: 0, filter: "blur(8px)" },
            {
                y: 0,
                opacity: 1,
                filter: "blur(0px)",
                stagger: 0.1,
                ease: "power1.out",
                duration: 1,
                scrollTrigger: {
                    trigger: title,
                    start: "top 80%",
                    toggleActions: "play none none none",
                }
            }
        );
    });
});
</script>