Cómo crear transiciones de página en Webflow

Cuando un mago hace pasar una moneda de una mano a otra con un simple movimiento, la moneda no tiene que desmaterializarse ni atravesar el aire; solo necesita parecer que lo hace.

Este concepto ha guiado mis decisiones de diseño en muchas ocasiones. Cuando se me ocurrió la idea para mi portafolio —el clic en un botón de navegación que provoca una transición fluida de una página a otra—, recuerdo haber pensado: ¿Por dónde empiezo? No soy un experto en JavaScript ni un desarrollador avanzado.

Y entonces me di cuenta: debería usar magia.

No necesitaba escribir un código Ajax personalizado para precargar la página de destino. Solo tenía que activar una interacción que escalara el cuerpo y moviera dos divs fuera del lienzo. Webflow facilitó esto con las Interacciones: lo único que debía hacer era encontrar la forma de añadir un retraso al enlace al hacer clic.

Con la solución en mente, recurrí a mi buen amigo Google y busqué un fragmento de JavaScript que añadiera un retraso a todos mis enlaces. En este artículo, te mostraré cómo lo utilicé.

Esto es lo que vamos a construir.

Paso 1: Añadir el fragmento de retraso del enlace

Añade el siguiente fragmento de JavaScript a la sección de la etiqueta de cierre </body> en la configuración del proyecto:

<script>
function delay (URL) {
setTimeout( function() { window.location = URL }, 850 );
}
</script>

Paso 2: Añadir los componentes de transición de página

Añade 2 divs

Coloca un div en el lienzo, asígnale la clase “Top Div” y aplica la siguiente configuración:

• Altura: 50vh
• Posición: Fija, superior
• Z-index: 99999
• Fondo: Blanco

Copia el Top Div haciendo clic derecho y seleccionando duplicar en el menú desplegable.

Ahora tienes otro div en el lienzo. Ve al panel de Estilos, selecciona la flecha en el nombre de la clase y haz clic en “Duplicar clase”.

Asígnale una nueva clase llamada “Bottom Div”.

Todos los ajustes se mantienen igual, excepto la posición, que cambiará a la parte inferior:

• Altura: 50vh
• Posición: Fija (Fixed), en la parte inferior (Bottom)
• Z-index: 99999
• Fondo: Blanco

Estas serán las cortinillas de apertura y cierre de la transición de página. Verás que las cortinillas estorban bastante.

Selecciona el Top Div, abre el panel de Estilo y añade:

• Ajuste de visualización: Ninguno

Haz lo mismo con el Bottom Div. Ahora que ya no estorban, podemos añadir las interacciones y las URL.

Paso 3: Retrasar los enlaces

Selecciona un botón en tu panel de navegación o cualquier botón de tu página. Abre el panel de Ajustes y, en lugar de seleccionar una página del menú desplegable, vamos a añadir el siguiente fragmento en el campo de URL. No pulses Intro para enviar el enlace — Webflow lo estropeará añadiendo “https://”. Para evitarlo y completar el proceso, simplemente haz clic fuera del enlace:

• `javascript:delay('URL')

Verás que he sustituido la URL por el “slug” de mi página de destino. Puedes encontrar tu slug yendo al panel de ajustes de la página.

Consejo pro

Al añadir un enlace que dirija al usuario a tu página de inicio, no uses `javascript:delay('home'). En su lugar, simplemente añade una /, así: `javascript:delay('/')

Sigue el proceso anterior para cada enlace que lleve a otra página dentro de tu proyecto. Publica tu proyecto y pruébalo.

Paso 4: Añadir las interacciones

Selecciona un enlace y abre el panel de Interacciones.

Añade una interacción haciendo clic en el icono más junto a Disparador de elemento y elige Clic del ratón (Toque) en el menú desplegable.

En la sección Al 1er clic, abre el menú desplegable.

Y selecciona Iniciar una animación.

Haz clic en el icono más en la sección Animaciones temporizadas.

Ponle a la interacción el nombre “Page Transition Out”. Para que te hagas una idea, esto es lo que hará la página cuando un enlace esté saliendo de ella:

Abre el panel Navegador y selecciona el Top Div.

Vuelve al panel de Interacciones.

Haz clic en el icono de más junto a las acciones temporizadas y elige la opción Ocultar/Mostrar.

Usa los siguientes ajustes:

• Afectar a: Clase, Todos los elementos con esta clase
• Temporización: Establecer como estado inicial
• Visualización: Bloque

A continuación, añade una transición de movimiento haciendo clic en el icono azul de más junto a la interacción de ocultar/mostrar anterior.

Usa estos ajustes:

• Afectar a: Clase, Todos los elementos con esta clase
• Temporización: Establecer como estado inicial
• Y: -50vh

Añade otra interacción de movimiento con los siguientes ajustes:

• Afectar a: Clase, Todos los elementos con esta clase
• Suavizado: In Out Quart
• Duración: 0.75s
• Y: 0vh

Ahora, selecciona las tres interacciones: resalta la superior y, mientras mantienes presionada la tecla Mayús, selecciona la inferior. Una vez que estén todas resaltadas, haz clic derecho en cualquiera de ellas y selecciona Duplicar en el menú desplegable.

Ahora tendrás tres interacciones más; de nuevo, resáltalas todas, haz clic derecho en cualquiera y elige Cambiar destino en el menú desplegable.