Page Transition con Elementor Pro y GSAP

En este tutorial te muestro cómo implementar una animación para la transición de páginas utilizando Elementor Pro y la librería de GSAP (GreenSock).

Mira cómo integrar el código GSAP completo que he desarrollado y utilizo activamente en mis proyectos webs. Le darás una mejor experiencia al usuario y conseguirás un efecto de animación web moderno

En este tutorial verás:

• Integración del código GSAP y Elementor.
• Configuración para aplicar la transición a tus enlaces (links) internos.
• Personalización del cambio de color de la transición.

<style>
body:not(.elementor-editor-active) .shapePreload {
    min-height: 200vh; 
    background-color: #292926;/* color de fondo */
    z-index: 1000000; 
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    border-radius: 50%;
}




@media screen and (max-width:767px){
body:not(.elementor-editor-active) .shapePreload{
	border-radius: 500px;
}
}

</style>


<div id="shapePreload" class="shapePreload"></div>



<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>


<script>

document.addEventListener("DOMContentLoaded", (event) => {

    console.log('init gsap')
    const shapeElement = document.getElementById('shapePreload')

    // Animacion inicial
    function initAnimation() {

        if (shapeElement) {

            const tl = gsap.timeline()

            // Animacion de entrada
            tl.set([shapeElement], {
                yPercent: 0,
            }).to([shapeElement], {
                yPercent: 100,
                ease: "power1.out",
                duration: 1, // duración de la animación
            })
        }
    }

    function outAnimationAndRedirect(url) {

        if (shapeElement) {

            const tl = gsap.timeline();
					
						// Cuando termine la animación, ir a la nueva página
						setTimeout(() => {
        		window.location.href = url;
    				}, 600);

            // Animacion de salida
            tl.set([shapeElement], {
                yPercent: -100,
            }).to([shapeElement], {
                yPercent: 0,
                ease: "power1.out",
                duration: 1, // duración de la animación
            });
        } else {
            // Si no hay elementos, redirigir directamente
            window.location.href = url;
        }
    }

    // Detecta clics en enlaces

    let dataLinkItems = document.querySelectorAll('[link-gsap-transition] a');
    dataLinkItems.forEach(item => {
        item.addEventListener('click', function (e) {
            e.preventDefault(); // Evita la navegación inmediata
            outAnimationAndRedirect(item.href); // Inicia la animación y redirige
        });
    });



    // Para evitar errores de cache
    window.addEventListener('pageshow', function (event) {
        const banners = document.querySelector('#banner-1');
        gsap.set(banners, { yPercent: 100 });
    });


    initAnimation()
})
	
</script>