Simple GSAP Transition – Tutorial de WordPress con Elementor

¡Bienvenidos! Hoy aprenderemos a crear una transición con GSAP que podrán utilizar en sus sitios con hechos en Elementor Pro. En este tutorial te muestro paso a paso cómo aplicar la animación y además comparto el código completo para que lo uses en tu web.

Código utilizado en el tutorial

<!-- estilos -->

<style>
    body:not(.elementor-editor-active) .preload {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        position: fixed;
        z-index: 1000;  /*sobre posicion del elemento*/
        top: 0;
        width: 100%;
    }

    body:not(.elementor-editor-active) .banner {
        background-color: #1e1e1e;  /* color de las columnas*/
        width: 100%;
        height: 100vh;
    }
	
	@media screen and (max-width:767px){
		body:not(.elementor-editor-active) .preload {
        grid-template-columns: repeat(4, 1fr);
    }
		body:not(.elementor-editor-active) .banner {
        display:none;
    }
		body:not(.elementor-editor-active) #banner-1,
		body:not(.elementor-editor-active) #banner-2,
		body:not(.elementor-editor-active) #banner-3,
		body:not(.elementor-editor-active) #banner-4 {
        display:block;
    }
	}
</style>

<!-- html -->

<div class="preload" aria-hidden="true">
		<div id="banner-1" class="banner"></div>
		<div id="banner-2" class="banner"></div>
		<div id="banner-3" class="banner"></div>
		<div id="banner-4" class="banner"></div>
		<div id="banner-5" class="banner"></div>
		<div id="banner-6" class="banner"></div>
		<div id="banner-7" class="banner"></div>
		<div id="banner-8" class="banner"></div>
		<div id="banner-9" class="banner"></div>
		<div id="banner-10" class="banner"></div>
		<div id="banner-11" class="banner"></div>
		<div id="banner-12" class="banner"></div>
</div>

<!-- javascript -->

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

<script>

    function inAnimation() {
        const banners = document.querySelectorAll('[id^="banner-"]');
        const preload = document.querySelector('.preload');

        if (banners.length) {
            console.log('init');

            const tl = gsap.timeline({
                onComplete: () => {
                    preload.style.visibility = "hidden";  // una vez completado la animación se oculta el contenedor
                }
            });

            // Calculamos la mitad
            const middle = Math.floor(banners.length / 2);

            // Se crean 2 grupos
            const leftGroup = Array.from(banners).slice(0, middle);
            const rightGroup = Array.from(banners).slice(middle);

            // Animación desde el centro hacia afuera
            tl.to(leftGroup.reverse(), {
		delay:0.2,
                yPercent: -100,
                stagger: 0.1,
		duration:0.3,
            }, 0) // <- ambos grupos comienzan al mismo tiempo
                .to(rightGroup, {
		    delay:0.2,
                    yPercent: -100,
                    stagger: 0.1,
		    duration:0.3,
                }, 0);
        }
    }
    inAnimation()

</script>