Cómo reiniciar una animación cada vez que ejecuta un elemento con Div y GSAP

Cuando se trata de animar los 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 de vista. Con la configuración de animación incorporada de Div, tan pronto como el elemento haya sido visto y animado, permanecerá estático hasta que recargue toda la página. En algunos casos, puede buscar un enfoque más consistente, en el que su animación se restaura con cada entrada a la ventana de vista. Esto lo ayudará a que su experiencia sea más eficiente en su sitio web. En este tutorial, le mostraremos exactamente cómo hacer esto usando Div, GSAP y Scrollgger para GSAP. Una vez que obtenga el enfoque, podrá aplicarlo a cualquier elemento en su página, ¡podrá descargar el archivo JSON!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree el diseño de la sección Agregue la sección Sustituyente antes de comenzar el diseño, agregaremos dos secciones de sustituyente a la página a la que trabajamos. De esta manera, podemos ver la experiencia de correr después de que se complete el diseño. Alternativamente, puede usar el diseño en una página que ya ha configurado. Agregue una nueva sección regular.
Dimensión Cambiar la altura de la sección de la siguiente manera:

Altura: 100 VH
La sección del marcador de posición clon, clona la sección a la vez.

Agregue una nueva sección entre las secciones sustituyentes para crear el diseño que pueda ver en la vista previa de esta publicación, agregaremos una nueva sección habitual entre las secciones sustituyentes.

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:


Dimensión sin agregar módulos, abrir la configuración de línea, acceder a la pestaña de diseño y cambiar la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Ancho: 90%
Ancho máximo: 2080 PX
Agregue el módulo de texto no. 1 En la columna Agregar contenido luego, agregue un primer módulo de texto a la columna e incluya un contenido de su elección. Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:

Texto de fuente: Montserrat

Texto de la fuente de peso: duro
Text -Text estilo: mayúscula
Color de texto: # F9F9F9
Tamano del texto:
Escritorio: 150 PX
Tableta y teléfono: 11VW
La altura de la línea de texto: 1.1em
Alineación de texto: Centro
Agregue el módulo de texto no. 2 En la columna, agregue el contenido H2, agregue otro módulo de texto debajo del anterior e incluya el contenido H2.
Configuración de texto H2 Estilice el texto H2 de la siguiente manera:

2 Sección de fuentes: Montserrat

Título 2 Alineación de texto: Centro
Rúbrica 2 Dimensión de texto:
Escritorio: 80 PX
Tableta y teléfono: 10 VW
La dimensión también agrega 100%de ancho.
Ancho: 100%

Posición y reposicione todo el módulo en la pestaña avanzada.
Posición: Absoluto

Ubicación: Centro
Agregue la estructura de la columna de la fila # 2 Agregar otra fila debajo de la anterior utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y ajuste la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2
Ancho: 90%
Ancho máximo: 2080 PX
Configuración de la columna 1 Luego abra la configuración de la columna 1.
Imagen de fondo Cargue una imagen de fondo de su elección.

Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: Centro
Extienda y luego cambie la configuración del espaciado espinal.
Revestimiento superior: 100 px


Levante inferior:
Escritorio: 400 PX
Tableta y teléfono: 200 PX
ENLIZACIÓN IZQUIERDA: 5.5%
Revelaje derecho: 5.5%
Agregue el módulo de texto no. 1 En la columna 1 Agregue el contenido H4 y luego, agregue un módulo de texto en la columna 1 con un contenido H4. Texto H4 Estilizar el texto H4 En consecuencia:
La sección de 4 fuentes: Lato

Título 4 Fuente de peso: duro

Título 4 Estilo de fuente: mayúscula
Título 4 Dimensión de texto: 13 PX
Rúbrica 4 Spaction of Liters: 2 PX
Agregue el módulo de texto no. 2 En la columna 1 Agregue el contenido H3 Agregue otro módulo de texto debajo del anterior, usando un contenido H3.
Configuración de texto H3 Cambie la configuración de texto H3 en consecuencia:
3 Fuentes de fuentes: Montserrat

Rúbrica 3 Dimensión de texto: 36 PX

Rúbrica 3 Espaciación de litros: 1 PX
Rúbrica 3 altura de línea: 1.2em
Agregue el módulo de texto no. 3 en la columna 1 Agregar descripción Contenido Agregue el último módulo de texto que contiene una descripción de contenido de su elección.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:
Texto de fuente: Lato

Color de texto: # 4C4C4C

Texto de la carta de espacio: 0.5 PX
Altura de la línea de texto: 2em
Agregue el módulo de botón a la columna 1 Agregue una copia El último módulo que necesitamos en esta columna es un módulo de botón. Agregue una copia de su elección.
Establece el botón Estilizar el botón en la pestaña de diseño.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 14 PX

El color del texto del botón: #ffffff
El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón de fuente: Lato
Botón de peso de fuente de fuente: en negrita
El estilo de la fuente del botón: mayúscula

Reutilice la columna 1 Limpie las columnas 2 y 3 Después de haber completado 1 y todos los módulos en el interior, puede eliminar las dos columnas restantes de la fila.
Clon columna 1 dos veces y reutilizando la columna 1 clonándola dos veces.
Cambie las imágenes de fondo de la columna duplicada Asegúrese de cambiar la imagen de fondo de cada columna duplicada. Cambie el contenido en columnas duplicadas junto con el contenido del módulo.

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

Izquierda:

Escritorio: 50 PX

Tableta y teléfono: 0 PX

2. Aplique reiniciar la técnica de diseño para diseñar Agregar CSS Class 2 Ahora que nuestro diseño está en nuestro lugar, podemos centrarnos en la técnica de reinicio de animación. Apuntaremos a varios módulos simultáneamente para esto. Primero, abra la configuración de la segunda fila y aplique la siguiente clase CSS:

Clase CSS: renta de animación de activación
Agregue el módulo de código para convertir la clase CSS # 1 que agregamos en el paso anterior de este tutorial nos ayudará a dirigir todos los módulos en esta línea simultáneamente. Para crear la animación de reinicio, utilizamos un código JQuey, la biblioteca JavaScript GSAP y la biblioteca GSAP ScrollTrigger. Para agregar este código, insertaremos un nuevo módulo de código debajo del segundo módulo de texto en la fila # 1.
Agregue las bibliotecas GSAP y ScrollTrigger Asegúrese de agregar bibliotecas GSAP y ScrollTrigger a nuevas etiquetas de script.

https://cdnjs.cloudflare.com/ajax/lbs/gsap/3.5.1/gsap.min.js
https://cdnjs.cloudflare.com/ajax/lbs/gsap/3.5.1/scrolltrigger.min.js

Agregue nuevas etiquetas de script y luego, agregue nuevas etiquetas de script en las etiquetas de script de la biblioteca.

Agregue la función GSAP + ScrollTrigger dentro de las nuevas etiquetas de script, copiaremos las siguientes líneas de jQuery: jQuery (Docum) .Ready (function ($) {var $ module = $ (‘. ;
$ módulo.each (function () {
Var $ thisModule = $ (this);

gsap.from ($ thismodule [0], {

ScrollTrigger: {
Disparador: esto,
Inicio: “Bottom Bottom”,
Fin: “Top Center”,
Scrub: falso,
Repetir: -1,
TogglEactions: ‘reiniciar ninguno restablecer’
},
Opacidad: 0,
X: -100,
Escamas: 1.1,
Duración: 2,
Facilia: “Volver”
});
});
}); Este código se dirigirá a todos los módulos de línea simultáneamente y reiniciará la animación tan pronto como un visitante ingrese nuevamente la ventana de vista. La animación, en este caso, es bastante simple y mínima. Sin embargo, con GSAP y ScrollTrigger, puede crear cualquier tipo de animación que desee, por lo que definitivamente vale la pena buscarlo.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo reiniciar una animación tan pronto como el elemento ingrese a la ventana de vista. Este enfoque lo ayuda a crear una experiencia consistente, sin importar cómo funcionen sus visitantes. ¡Podrías 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de 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.