Freebies
Discover our latest free template, claim it today. Learn More

Transiciones de página sin problemas en el flujo web con Lottie

Publicado por
IVG
Transiciones de página sin problemas en el flujo web con Lottie

Hola compañeros de Webflowers!

Me gustaría compartir una característica impresionante que podemos utilizar, ahora que Webflow ha lanzado la integración de Lottie.

En primer lugar me gustaría dar un grito al personal de Webflow, que es muy servicial y receptivo (@sabanna & @tai) y a @Jeandcc todos los cuales fueron instrumentales para hacer esto una realidad.

Creo que esto hará feliz a un montón de gente (espero) - una manera fácil de integrar transiciones animadas de página completa usando la funcionalidad de lotería integrada de Webflow y usando el archivo smoothhstate.js - una librería que permite transiciones de página perfectas (así que no hay parpadeo en el cambio de página).

He utilizado una plantilla gratuita de Webflow e integrado las transiciones y el archivo smoothstate.js en ella.

Esto es lo que haces:

Parte I - Configurar las páginas para que funcionen con el archivo smoothstate.js:

  • Crear un div permite llamarlo Contenedor de Contenido y colocarlo en la parte superior del cuerpo. Dale un ancho de 100vw y una identificación de "principal".
  • Coloque los elementos que tenga en la página en el Contenedor de Contenidos en el mismo orden en que se encuentran (nada debe cambiar en su página)
  • Repita los pasos i. y ii. en cada página que desee tener una transición (y utilice smoothstate.js)

Parte II - Preparar las animaciones de la Lotería

  • Asumiendo que ya has subido tu lotería json con una animación de transición a pantalla completa, crea un div, llamémoslo "Transición-Contenedor", dale: altura = 0px y anchura = 0px, y coloca la(s) lotería(s) en él y dale a las loterías una clase de "transición" (o si estás usando dos separadas usa dos clases separadas - "transición-en-Carga" y "transición-en-Salida" - lo hará más fácil más adelante cuando necesites hacer las animaciones de IX2)
  • La animación que tienes - se escalará y permanecerá en la misma relación de aspecto que fue creada, así que para hacerla a pantalla completa (sin importar la relación de aspecto, ve a los Ajustes de Animación de Lottie (el icono del engranaje en el Diseñador) y añade el siguiente "Personalizado
  • atributo: Nombre de la relación de conservación de datos Valor ninguno
  • Establezca la siguiente posición en "transition" (o si es aplicable transition-onLoad y transition-onExit): display = oculto; ancho = 100vw; alto = 100vh; posición = fija; z-index = 9999 (o tan alto como quiera siempre y cuando esté encima de todo)

Parte III - Preparar los botones ocultos

  • Crear dos buceos - llamarlos botón-cargar y botón-salir, darles altura = 0px y anchura = 0px
  • Para cada uno de los botones necesitas hacer una animación de IX2. Aquí todo depende de si vas a usar (i) 1 animación de lotería que va de 0%-100 y luego la inviertes 100%-0% o (ii) si vas a usar 2 animaciones ambas corriendo 0%-100%.
Оption (i):
  • haga su animación onLoad de la siguiente manera -
    * animación de lotería - establecida al 100%; establezca el estado
    inicial * ocultar/mostrar - establecido para mostrar=bloque; establecido como "estado inicial"
    * animación de lotería - establecido al 100% y elija su duración (pero recuérdelo - lo necesitará más tarde)
    * ocultar/mostrar - establecido para mostrar=ninguno
  • haga su animación de onExit de la siguiente manera -
    * ocultar/mostrar - establecer en display=bloque; NO lo establezca como "estado inicial"
    * animación de lotería - establezca en 0% y elija su duración
  • -NB Asegúrate de que estás afectando a "class" y a "todos los elementos con esta clase".
  • La opción ii) implicaría un poco más
  • (pero no por mucho)
  • haga su animación de onLoad de la siguiente manera:
    * hide/show - set to display=block; set as "initial state"
    * lottie animation - set to 100% and chose your duration (but remember it - you will need it later)
    * hide/show - set to display=none
    * lottie animation - set to 0% and 0 duration (to return it to the initial state for next run
  • Haga su animación onExit de la misma manera
    * hide/show - set to display=block; set as "initial state"
    * lottie animation - set to 100% and chose your duration (but remember it - you will need it later)
    * hide/show - set to display=none
    * lottie animation - set to 0% and 0 duration (to return it to the initial state for next run
  • *NB Asegúrese de que está afectando a "class" y a "todos los elementos con esta clase".
  • asignar la animación correcta al botón correcto
  • - se explica por sí mismo, pero no puedo decirte cuántas veces he seleccionado la animación equivocada para el botón equivocado
  • seleccione la transición-contenedor y conviértala en un símbolo - facilitará la replicación en cada página que tenga.
  • Repita la misma estructura en cada página, como lo hizo en la Parte I - su estructura final debe ser la: Símbolo de Transición-Contenedor y debajo de él Contenedor de Contenido con sus cosas de la página.

Parte - IV Establecer el Código personalizado - la última parte y la más fácil!

  • Vaya a la configuración de "código personalizado" de sus proyectos y añada el siguiente código al área "Código de pie de página":



  • Recuerde que le mencioné que necesitará la duración de la animación? Utilícelo (en milisegundos - 1sec=1000msec) y añádalo al código en el lugar correspondiente (duración: XXXX,).

Publica y listo! Puede ir a su página publicada y disfrutar de su página completa animada por la lotería y con transiciones de página suaves y sin problemas!

Aquí hay un enlace a la página de la demo 7 que hice

OTHER GUIDES & LESSONS

Boost your webflow site further.