Cómo agregar animación GSAP en Elementor (plantilla gratuita)

Puede ejecutar animación GSAP completa dentro de Elementor. Revelaciones de texto dividido, desplazamiento horizontal fijado, paralaje borrado de desplazamiento, contadores, todo ello, sin desarrollo de complementos ni ediciones de funciones.php, y sus clientes mantienen la capacidad de editar cada título y color. El truco es el Creador de widgets en Complementos maestros: pegue su HTML, CSS y JS una vez, marque lo que debería ser editable y se convertirá en un widget Elementor normal que cualquiera puede colocar en una página y editar desde el panel.

Para demostrarlo, construí una plantilla de aterrizaje GSAP completa de una página (un estudio de movimiento ficticio llamado Playhead) y convertí cada sección en un widget importable. Puedes descargue los seis widgets como un zip al final de esta publicación, imórtalos con un par de clics y sepáralos para ver exactamente cómo funcionan.

En esta guía, analizaré paso a paso cómo construí el widget de la sección héroe y luego resumiré las otras cinco secciones. Si alguna vez quisiste convertir un diseño HTML/CSS/JS a Elementor, incluido el código que generaste con ChatGPT o Claude, este es el flujo de trabajo.

Un atajo antes de comenzar: si el movimiento que desea es una fila de imágenes que se mueve, es posible que no necesite escribir el GSAP en absoluto. Ya enviamos 20 carrusel y widgets deslizantes construido de la misma manera «, uno gira los paneles laterales en 3D, uno retira las tarjetas de una pila, uno monta sus diapositivas alrededor de un borde curvo 'y cada uno importa como un widget Elementor normal que editas desde el panel.

Ocho de ellos se ejecutan en el complemento gratuito, doce necesitan Pro. Incluso si ninguno coincide exactamente, importar el más cercano y leer el JS en su interior supera a partir de un editor vacío, y los pasos de compilación más abajo en esta publicación son los que convierten ese JS en controles.

¿qué es la animación GSAP?

GSAP (GreenSock Animation Platform) es una biblioteca de animación JavaScript que anima cualquier cosa en una página web “texto, imágenes, SVG, propiedades CSS « con sincronización precisa de fotogramas y control de facilidad. Alimenta los efectos de desplazamiento y las revelaciones de texto que ves en sitios galardonados y, desde la versión 3.13, toda la biblioteca, incluidos los complementos premium como ScrollTrigger y SplitText, es 100% gratuita.

Esa última parte importa más de lo que la gente cree. SplitText (el complemento que divide los titulares en personajes animados individualmente) solía costar más de $99 por año detrás del muro de pago “Club GreenSock”. Después de que Webflow adquiriera GSAP, todo quedó gratis. Entonces, la única barrera real que queda para los usuarios de WordPress es la integración, y eso es lo que elimina esta publicación.

El problema: Elementor no habla GSAP

Los efectos de movimiento integrados de Elementor cubren animaciones de entrada, paralaje básico y seguimiento del mouse. Bueno para el 80% de las páginas. Pero no pueden hacerlo:

• El texto dividido revela dónde se anima cada personaje con su propio retraso
• Secciones fijadas que se desplazan horizontalmente mientras que la página se desplaza verticalmente
• Animación borrada de desplazamiento vinculada a la posición exacta de desplazamiento (especialidad de ScrollTrigger)
• Líneas de tiempo encadenadas donde una animación pasa a la siguiente
• Efectos reactivos a la velocidad, donde los elementos responden a la rapidez con la que se desplaza el visitante

Todas las soluciones habituales comparten un defecto. Puedes pegar código en un widget HTML, pero luego el texto del titular vive dentro de un bloque de código que tu cliente nunca se atreverá a tocar. Puedes instalar un complemento de animación específico de GSAP, pero estás limitado a sus efectos preestablecidos. Puedes poner en cola scripts a mano en el tema secundario, pero ahora editar un titular requiere un desarrollador.

4 formas de agregar animación GSAP a Elementor (comparado)

Los complementos preestablecidos están realmente bien si todo lo que necesitas es un desvanecimiento en el desplazamiento. El Widget Builder gana cuando quieres una animación que nadie más tiene, porque tú (o una IA) la escribiste. Haces el código una vez, conectas las partes editables a los controles y, a partir de entonces, se comporta como cualquier widget original de Elementor: campos de texto, selectores de color, controles de enlaces, todo.

La plantilla gratuita: una página de inicio completa de GSAP en 6 widgets

Playhead es un sitio de una página para un estudio de movimiento ficticio. Elegí ese nicho a propósito: para un estudio de movimiento, la animación es la cartera, por lo que cada efecto gana su lugar. La página se ejecuta en GSAP 3.15 con ScrollTrigger y SplitText, cargados desde la CDN oficial.

Los seis widgets en la descarga:

1. Héroe « Revelación de caracteres SplitText, formas de diamantes de paralaje, orbes luminosos a la deriva, botones magnéticos
2. Carpa « teletipo infinito que se acelera cuando el visitante se desplaza más rápido
3. Galería de trabajo « desplazamiento horizontal fijado con un contador de cartas en vivo y un sesgo de cartas basado en la velocidad
4. Estadísticas « contadores que se acumulan desde cero cuando entran en la ventana gráfica
5. Proceso « cuatro curvas de flexibilización que literalmente se dibujan a sí mismas, cada una usando su propia facilidad GSAP
6. CTA «revelación de texto dividido activada por desplazamiento con un botón de correo electrónico magnético

Cada widget es autónomo: CSS con alcance para que no pueda chocar con su tema, su propio cargador GSAP que recupera la biblioteca una vez incluso si los seis widgets se encuentran en la misma página y retrocede para que el contenido permanezca visible si alguna vez se coloca la CDN. También se respetan las preferencias de movimiento reducido. Los visitantes que desactivan las animaciones en su sistema operativo obtienen una página estática.

Cómo construí el widget Hero, paso a paso

Esta es la parte que se generaliza a cualquiera animación que siempre querrás. Los mismos siete pasos cada vez.

Paso 1: comience a trabajar con HTML, CSS y JS

La fuente puede ser cualquier cosa: un CodePen que admires, una sección que codificaste o salida de un chat de IA. Mi héroe eran tres archivos: el marcado, los estilos y un script que crea una línea de tiempo GSAP. Antes de tocar el Widget Builder, asegúrese de que funcione como un archivo.html simple en un navegador. La depuración es 10 veces más fácil allí que dentro de cualquier creador de páginas.

Paso 2: alcance todo en una clase de envoltorio

Su widget vivirá en páginas con otros widgets, otros complementos y otros CSS. Envuelva toda la sección en una clase única y cuelgue cada selector:

<section class="ph-hero-wrap">
  ...
</section>

/* every rule starts with the wrapper */
.ph-hero-wrap .ph-title { font-size: clamp(3rem, 10.5vw, 8.6rem); }
.ph-hero-wrap .ph-btn-solid { background: var(--ph-primary, #5551f0); }

También cambie el nombre de los fotogramas clave de animación genéricos. @keyframes spin se convierte @keyframes ph-hero-spin, entonces dos widgets en una página nunca pelean por el mismo nombre. Este solo paso evita que el 90% de los tickets de soporte de “mi widget rompiera la página”.

Paso 3: reemplace el texto editable con tokens

En cualquier lugar donde el propietario de un sitio quiera palabras diferentes, cambie el texto codificado por un token con doble rizo:

<h1 class="ph-title">
  <span class="ph-split">{{title_line_one}}</span>
  <span class="ph-split">{{title_line_two}}</span>
  <em class="ph-serif">{{accent_word}}</em>
</h1>

Observe que divido el título en tres tokens en lugar de uno. La palabra de acento (“mover”) tiene un estilo diferente “cursiva serif, ámbar, animada « para que tenga su propio control. La persona que edita nunca necesita saber eso; solo ven tres campos de texto etiquetados. Cada token se convierte en un Control de texto en el constructor.

Los botones obtienen un control de URL para que el enlace, la nueva pestaña se alterne y no sigan todo el trabajo desde el panel:

<a class="ph-btn" href="{{first_button_url.url}}"
   target="{{first_button_url.is_external}}"
   rel="{{first_button_url.nofollow}}">{{first_button_text}}</a>

Paso 4: convierta los colores de la marca en controles de estilo

Resiste la necesidad de crear treinta controles de color. Mi héroe tiene cinco: fondo, texto, acento, primario y silenciado. Alimentan variables CSS en el contenedor y cada color derivado (brillos, bordes, sombras) se calcula a partir de ellas color-mix():

.ph-hero-wrap {
  --ph-accent: {{accent_color}};
  --ph-primary: {{primary_color}};
  --ph-glow-primary: color-mix(in srgb, var(--ph-primary, #5551f0) 22%, transparent);
}

Cambie “Primario” en el Control de color y el botón, el orbe luminoso y las formas de diamante se actualizan juntos. Eso es lo que hace que un widget parezca diseñado en lugar de ensamblado.

Paso 5: Cargue GSAP desde el CDN « Una vez

El JS inyecta los scripts GSAP con ID protegidos, por lo que seis widgets en una página aún cargan la biblioteca exactamente una vez:

["ph-gsap-core", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"],
["ph-gsap-st",   "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"],
["ph-gsap-split","https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"]

Entonces la animación en sí es una línea de tiempo GSAP estándar. Los personajes suben tambaleándose, la palabra de acento aparece back.out(2.5), los diamantes frotan contra la posición de desplazamiento. Si ya conoce GSAP, nada cambia. Si no lo sabes, este es exactamente el código que una IA escribirá felizmente para ti (más sobre eso a continuación).

Paso 6: cree el widget en el generador de widgets

En su panel de WordPress: Complementos maestros → Creador de widgets → Agregar nuevo. Nombra el widget, elige un icono y luego pega tus tres archivos en las pestañas HTML, CSS y JS.

Ahora agregue un control por token: 19 para mi héroe « cuatro textos de cejas, cuatro campos de encabezado, la descripción, dos botones con sus enlaces, la señal de desplazamiento y cinco colores en la pestaña Estilo. El nombre del control debe coincidir exactamente con el token: el {{title_line_one}} el token necesita un control llamado title_line_one. La referencia de control total vive en el Documentación del creador de widgets.

Un detalle que vale la pena copiar: dale a cada control de color un valor predeterminado que coincida con tu diseño. Un widget que importa gris porque sus controles de color estaban vacíos parece roto incluso cuando no lo está.

Paso 7: colóquelo en Elementor y edite como cualquier widget

Publique el widget y aparecerá en el panel Elementor en Complementos maestros. Arrástrelo a una página y el panel izquierdo mostrará sus campos etiquetados. Cambie “Hacemos” a su propio titular, vuelva a colorear el acento, apunte los botones a su página de precios. La línea de tiempo de GSAP sigue ejecutándose en cada edición. Esa es toda la promesa: complejidad de la animación oculta, edición de contenido expuesta.

Las otras cinco secciones, brevemente

Marquesina (3 controles). El texto del teletipo se imprime dos veces para un bucle CSS sin espacios y GSAP toma el control para reaccionar a la velocidad de desplazamiento. Desplácese rápidamente y acelere hasta 4x, luego retroceda. Ejemplo de enseñanza divertido porque el respaldo es CSS puro: si GSAP nunca se carga, aún se desplaza.

Galería de Trabajo (22 controles). La obra maestra. ScrollTrigger fija la sección mientras la pista de la tarjeta se traduce horizontalmente, un contador marca 01/05 y las tarjetas se inclinan ligeramente según la velocidad de desplazamiento. Cinco cartas, cada una con título editable, código de tiempo y etiquetas. En dispositivos móviles se degrada a un carrusel de deslizamiento nativo, no se requieren fijaciones ni JS. Necesita una sección de ancho completo en Elementor para que funcionen las matemáticas de pines.

Estadísticas (13 controles). Cuatro números que cuentan con facilidad de exposición cuando se desplazan a la vista. Los números finales viven en el marcado mismo, por lo que incluso con los visitantes deshabilitados de JavaScript, consulte “142”, no “0”.

Proceso (20 controles). Mi presunción favorita en la página: cuatro pasos del proceso, cada uno combinado con una curva de flexibilización SVG que se dibuja a sí misma usando esa facilidad exacta. La curva lineal dibuja linealmente, la curva de retroceso se sobrepasa. Los subtítulos de los códigos son controles de texto editables, por lo que puede intercambiar las referencias GSAP por sus propias descripciones de pasos.

CTA (11 controles). La misma técnica de texto dividido que el héroe pero que se activa al desplazarse, además de un botón magnético que sigue al cursor y regresa con una facilidad elástica. Apunta el control de URL a un mailto: enlace y es una sección de contacto.

Descargue la plantilla (6 widgets, un zip)

Descargar gsap-animation-elementor-widgets.zip « los seis archivos JSON de widgets, gratis, sin puerta de correo electrónico.

Una nota antes de comenzar: la versión gratuita de Master Addons incluye un Widget Builder limitado y viene con el conjunto completo de funciones que utilizan estos widgets Complementos maestros Pro. Para importar:

1. Descomprime la descarga «verás seis archivos JSON, uno por sección
2. Ir a Complementos maestros → Creador de widgets en su panel de WordPress
3. Hacer clic Importar, elija un archivo JSON y confirme
4. Repita para las secciones que desee (no necesita las seis)
5. Abra cualquier página con Elementor y arrastre los widgets desde la categoría Addons maestros

Todo se puede editar después de la importación: 88 controles en los seis widgets, en cada color, en cada titular, en cada enlace. No hay imágenes para cargar. Todas las imágenes son CSS y SVG, que también mantienen toda la plantilla por debajo de 200KB.

El ángulo de la IA: convierta cualquier diseño generado a Elementor

Las herramientas de inteligencia artificial ahora escriben código GSAP realmente bueno. Pregúntele a ChatGPT o Claude “una sección de héroe con revelación de texto dividido GSAP, fondo oscuro, paralaje de desplazamiento” y obtendrá HTML, CSS y JS funcionando en una sola respuesta. El problema siempre fue la última milla: ese código estaba atascado como un archivo estático, inútil para un cliente que edita en Elementor.

El Widget Builder es esa última milla. Un patrón rápido que funciona bien:

Build a [section type] with GSAP animation.
Requirements:
- Wrap everything in one unique class, prefix all selectors with it
- Load gsap from cdn.jsdelivr.net/npm/gsap@3.15 via injected script tags
- Put editable text in {{token}} placeholders
- Define brand colors as CSS variables on the wrapper

Pregunte por esas cuatro restricciones por adelantado y la salida caerá en Widget Builder casi sin cambios. Todavía lo probaría primero como un archivo HTML plano. El código de IA normalmente funciona, pero “normalmente” no es una palabra que desee descubrir dentro de la página en vivo de un cliente.

Rendimiento: Mantenga la animación GSAP rápida

• Cargue la biblioteca una vez. Los ID de script protegidos del Paso 5 manejan esto automáticamente en varios widgets.
• Animar transformaciones y opacidad, no ancho/alto/arriba/izquierda. GSAP hace esto de forma predeterminada con x, y, y scale « el compositor del navegador los maneja sin reflujo.
• El respeto prefiere el movimiento reducido. Cada widget de la plantilla lo comprueba y ofrece contenido estático. Accesibilidad, pero también duración de la batería.
• El costo total es pequeño. GSAP core + ScrollTrigger + SplitText está minificado aproximadamente en 90 KB, menos que la mayoría de las imágenes de un solo héroe. Combina la plantilla con páginas sencillas y pasarás Core Web Vitals cómodamente; nuestro guía de efectos de animación cubre el panorama más amplio de la velocidad.

Si GSAP parece más de lo que necesitas, Master Addons también envía movimiento sin código de la caja « animaciones de entrada, efectos flotantes, y el sistema de animación « con configuración cero. GSAP es para cuando los ajustes preestablecidos dejan de ser suficientes.

Guía de videotutoriales

Quizás no prefieras leer, así que te creo un vídeo sobre cómo descargar e instalar el widget con GSAP Animation en tu editor Elementor.

Preguntas frecuentes

Comience con la plantilla y luego cree la suya propia

Importe los seis widgets, rompalos, reconstruyéndolos. La forma más rápida de entender el Widget Builder es abrir el widget héroe después de importarlo y ver cómo 19 controles se asignan a los tokens en su pestaña HTML. Después de eso, cada CodePen que marque como favorito y cada sección generada por IA se convierte en un candidato a widget.

Master Addons se ejecuta en más de 30 000 sitios de WordPress y el Widget Builder completo se envía con la versión Pro. Ver todo incluido en el página de widgets y extensiones, descargue la plantilla de arriba y su primer widget GSAP personalizado podrá estar disponible hoy.