Cómo reiniciar una animación cada vez que se desplaza más allá de un elemento con Divi y GSAP

Cuando se trata de animar elementos en su página, lo más probable es que desee activar la animación de un elemento una vez que ingrese a la ventana gráfica. Con la configuración de animación incorporada de Divi, tan pronto como ese elemento haya aparecido a la vista y haya sido animado, permanecerá estático hasta que vuelva a cargar toda la página. En algunos casos, puede buscar un enfoque más coherente, en el que la animación se reinicia con cada entrada de la ventana gráfica. Hacer esto le ayudará a optimizar la experiencia que tienen los visitantes en su sitio web. En este tutorial, le mostraremos exactamente cómo hacerlo usando Divi, GSAP y ScrollTrigger para GSAP. Una vez que obtenga el enfoque, podrá aplicarlo a cualquier elemento de su página. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Crear diseño de sección

Agregar sección de marcador de posición

Antes de comenzar a crear el diseño, agregaremos dos secciones de marcador de posición a la página en la que estamos trabajando. De esa manera, podemos ver la experiencia de desplazamiento una vez que el diseño esté terminado. Alternativamente, puede usar el diseño dentro de una página que ya haya configurado. Agregue una nueva sección regular.

Dimensionamiento

Modifique la altura de la sección de la siguiente manera:

• Altura: 100vh

Clonar sección de marcador de posición

Luego, clona la sección una vez.

Agregar nueva sección entre secciones de marcador de posición

Para crear el diseño que pudo ver en la vista previa de esta publicación, agregaremos una nueva sección regular entre las secciones de marcador de posición.

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila, vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de canalón: 2
• Ancho: 90%
• Ancho máximo: 2080px

Agregar el módulo de texto n. ° 1 a la columna

Agregar contenido

Luego, agregue un primer módulo de texto a la columna e incluya algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

• Fuente de texto: Montserrat
• Peso de la fuente del texto: Pesado
• Estilo de fuente de texto: mayúsculas
• Color del texto: # f9f9f9
• Tamano del texto:
  • Escritorio: 150px
  • Tableta y teléfono: 11vw
• Altura de la línea de texto: 1.1em
• Alineación de texto: centro

Agregar el módulo de texto n. ° 2 a la columna

Agregar contenido H2

Agregue otro módulo de texto debajo del anterior e incluya algo de contenido H2.

Configuración de texto H2

Diseñe el texto H2 de la siguiente manera:

• Fuente del encabezado 2: Montserrat
• Alineación del texto del encabezado 2: centro
• Tamaño del texto del encabezado 2:
  • Escritorio: 80px
  • Tableta y teléfono: 10vw

Dimensionamiento

Agregue un ancho del 100% también.

• Ancho: 100%

Posición

Y reposicione todo el módulo en la pestaña avanzada.

• Posición: Absoluto
• Ubicación: Centro

Agregar fila n. ° 2

Estructura de la columna

Agregue otra fila debajo de la anterior, usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y ajuste la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2
• Ancho: 90%
• Ancho máximo: 2080px

Configuración de la columna 1

Luego, abra la configuración de la columna 1.

Imagen de fondo

Sube una imagen de fondo de tu elección.

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro

Espaciado

A continuación, modifique la configuración de espaciado de la columna.

• Relleno superior: 100 px
• Acolchado inferior:
  • Escritorio: 400px
  • Tableta y teléfono: 200px
• Acolchado izquierdo: 5,5%
• Acolchado derecho: 5,5%

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido H4

Luego, agregue un módulo de texto a la columna 1 con algo de contenido H4.

Configuración de texto H4

Diseñe el texto H4 en consecuencia:

• Fuente del encabezado 4: Lato
• Peso de fuente del encabezado 4: Pesado
• Estilo de fuente del título 4: mayúsculas
• Tamaño del texto del encabezado 4: 13px
• Encabezado 4 espaciado de letras: 2px

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido H3

Agregue otro módulo de texto debajo del anterior, usando algo de contenido H3.

Configuración de texto H3

Cambie la configuración del texto H3 en consecuencia:

• Fuente del encabezado 3: Montserrat
• Tamaño del texto del encabezado 3: 36px
• Encabezado 3 espaciado de letras: 1px
• Altura de la línea del título 3: 1.2em

Agregue el módulo de texto n. ° 3 a la columna 1

Agregar contenido de descripción

Agregue el último módulo de texto que contiene algún contenido descriptivo de su elección.

Configuración de texto

Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente de texto: Lato
• Color del texto: # 4c4c4c
• Espaciado de letras de texto: 0.5px
• Altura de la línea de texto: 2em

Agregar módulo de botones a la columna 1

Agregar copia

El último módulo que necesitamos en esta columna es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Aplicar estilo al botón en la pestaña de diseño.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 14px
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 000000
• Ancho del borde del botón: 0px

• Fuente del botón: Lato
• Peso de la fuente del botón: negrita
• Estilo de fuente del botón: mayúsculas

Reutilizar la columna 1

Eliminar columnas 2 y 3

Una vez que haya completado la columna 1 y todos los módulos que contiene, puede eliminar las dos columnas restantes de la fila.

Clonar columna 1 dos veces

Y reutilice la columna 1 clonándola dos veces.

Cambiar imágenes de fondo de columnas duplicadas

Asegúrese de cambiar la imagen de fondo de cada columna duplicada.

Cambiar contenido en columnas duplicadas

Junto con el contenido del módulo.

Agregar configuración de Transform Translate a la columna 2

Luego, abra la configuración de la columna 2 y vaya a la pestaña de diseño. Una vez allí, agregue algunos valores de traducción de transformación en diferentes tamaños de pantalla para completar el diseño.

• Izquierda:
  • Escritorio: 50px
  • Tableta y teléfono: 0px

2. Aplicar la técnica de reinicio de animación al diseño

Agregar clase CSS a la fila n. ° 2

Ahora que nuestro diseño está en su lugar, podemos centrarnos en la técnica de animación de reinicio. Vamos a apuntar a varios módulos a la vez para esto. Primero, abra la configuración de la segunda fila y aplique la siguiente clase CSS:

• Clase CSS: trigger-animation-row

Agregar módulo de código a la fila n. ° 1

La clase CSS que agregamos en el paso anterior de este tutorial nos ayudará a apuntar a todos los módulos dentro de esta fila a la vez. Para crear la animación de reinicio, usamos código JQuery, la biblioteca de JavaScript GSAP y la biblioteca ScrollTrigger para GSAP. Para agregar este código, insertaremos un nuevo módulo de código debajo del segundo módulo de texto en la fila # 1.

Agregar bibliotecas GSAP y ScrollTrigger

Asegúrese de agregar las bibliotecas GSAP y ScrollTrigger dentro de las nuevas etiquetas de secuencia de comandos.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Agregar nuevas etiquetas de secuencia de comandos

Luego, agregue nuevas etiquetas de secuencia de comandos debajo de las etiquetas de secuencia de comandos de la biblioteca.

Agregar función GSAP + ScrollTrigger

Dentro de las nuevas etiquetas de script, copiaremos y pegaremos las siguientes líneas del código JQuery:

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Este código apuntará a todos los módulos de fila a la vez y reiniciará la animación tan pronto como un visitante ingrese a la ventana gráfica nuevamente. La animación, en este caso, es bastante sencilla y mínima. Sin embargo, con GSAP y ScrollTrigger, puede crear cualquier tipo de animación que desee, ¡así que definitivamente vale la pena investigarlo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo reiniciar una animación tan pronto como el elemento ingresa a la ventana gráfica. Este enfoque le ayuda a crear una experiencia coherente, sin importar cómo se desplacen sus visitantes. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.