Importar animaciones HTML en Elementor se hace por cuatro caminos: el widget Lottie (para archivos JSON vectoriales), CSS personalizado con @keyframes, la librería GSAP cargada vía Custom Code, y el widget HTML para pegar código de bibliotecas externas. Cada uno resuelve un nivel de complejidad distinto, desde una animación simple hasta un scroll trigger profesional.
Si trabajaste con Elementor alguna vez, sabés que arrancás queriendo «una animacioncita al hacer scroll» y terminás peleando con tres librerías que no se llevan bien. La buena noticia: no necesitás reinventar nada. Lottie, CSS, GSAP y el widget HTML cubren prácticamente cualquier caso, y cada uno tiene su lugar.
Una animación HTML en Elementor es un movimiento o transición visual (fade, scale, parallax, recorrido por scroll) que se incorpora a una página de WordPress hecha con Elementor, ya sea mediante widgets nativos del builder o insertando código propio (CSS, JavaScript o un JSON de Lottie). Elementor es el constructor visual de páginas para WordPress desarrollado por la empresa Elementor, usado por millones de sitios.
En 30 segundos
- Cuatro métodos: widget Lottie (JSON), CSS con
@keyframes, GSAP vía Custom Code, y widget HTML para código externo. - Lottie es lo más liviano y compatible para animaciones vectoriales prefabricadas; no necesitás tocar código.
- CSS puro alcanza para fade, slide y bounce, pero se queda corto cuando querés sincronizar varios elementos o animar por scroll.
- GSAP es la opción profesional: control total, animaciones complejas y scroll triggers, pero suma una librería JavaScript.
- Custom Code es una función de Elementor Pro; con la versión gratis te queda el widget HTML como alternativa.
¿Cuáles son los métodos para importar animaciones HTML en Elementor?
Hay cuatro caminos reales. La diferencia no es cuál es «mejor», sino cuánto control necesitás y si te animás a tocar código.
El primero es el widget Lottie, pensado para cargar animaciones vectoriales en formato JSON. El segundo es CSS personalizado, desde la pestaña Avanzado de cualquier widget. El tercero es GSAP, la librería de JavaScript que cargás con Custom Code (Elementor Pro). Y el cuarto es el widget HTML, donde pegás directamente código de bibliotecas como Animate.css o AOS.
¿Cuándo conviene cada uno? Depende de la pieza que estés animando.
| Método | Requiere código | Elementor Pro | Mejor para |
|---|---|---|---|
| Widget Lottie | No | No | Animaciones vectoriales prefabricadas (íconos, ilustraciones) |
| CSS personalizado | Sí (básico) | No (en widget) | Fade, slide, bounce, transiciones simples |
| GSAP | Sí (JS) | Sí (Custom Code) | Secuencias complejas, scroll triggers, timelines |
| Widget HTML | Sí | No | Librerías externas, código a medida, alternativa a Custom Code |
Ojo con una cosa: cargar GSAP y Lottie y CSS pesado todo junto en la misma página es la receta perfecta para un LCP horrible. Elegí lo mínimo que resuelva el efecto que querés. Complementá con cómo funciona Elementor en WordPress.
Cómo cargar animaciones Lottie en Elementor
Lottie es un formato de animación vectorial guardado como archivo JSON. Lo bueno: pesa poco, escala sin pixelarse y se reproduce suave en mobile. Es la vía más rápida si no querés escribir una línea de código.
El recorrido típico es este:
- Conseguí el JSON. Entrá a LottieFiles, una biblioteca con miles de animaciones gratis y de pago, y descargá el archivo o copiá su URL pública.
- Arrastrá el widget Lottie al canvas de Elementor (está entre los widgets nativos).
- Cargá el origen: podés subir el archivo JSON a tu Biblioteca de medios o pegar la URL externa.
- Ajustá el disparador: reproducción automática, al hacer hover, al entrar en viewport o al scroll. También configurás velocidad y loop.
Listo. Sin tocar CSS ni JS. La contra es que estás limitado a lo que la animación JSON ya trae: si querés modificar el recorrido a fondo, ahí Lottie deja de alcanzar.
Un detalle de performance: si cargás el JSON desde una URL externa, dependés de ese servidor. Subir el archivo a tu propio hosting te da más control sobre los tiempos de carga.
Cómo animar con CSS personalizado y @keyframes
Ponele que querés que un título aparezca con un fade y un pequeño desplazamiento hacia arriba cuando carga la página. Para eso no necesitás ninguna librería: con CSS y @keyframes lo resolvés.
En cualquier widget de Elementor vas a la pestaña Avanzado > CSS personalizado (disponible en Elementor Pro a nivel widget; en la versión gratis lo metés a nivel de página o tema). Ahí escribís algo así:
selector {
animation: aparecer 0.8s ease-out both;
}
@keyframes aparecer {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}El selector es la palabra mágica de Elementor: apunta al widget actual sin que tengas que averiguar su clase. Cambiás ease-out por otra timing function (ease-in-out, cubic-bezier()) y tenés otro carácter de movimiento. Lo explicamos a fondo en crear temas personalizados con Elementor.
CSS puro es eficiente y no carga JavaScript extra, así que tu navegador lo procesa rápido. ¿La limitación? Sincronizar varios elementos en una secuencia, encadenar animaciones o dispararlas con precisión al scroll se vuelve un dolor de cabeza. Para eso está GSAP.
¿Qué es GSAP y cuándo conviene usarlo en Elementor?
GSAP (GreenSock Animation Platform) es una librería de JavaScript para crear animaciones web. La usan estudios de diseño para esos sitios donde todo se mueve coordinado al hacer scroll. Si CSS es una llave inglesa, GSAP es la caja de herramientas completa.
¿Por qué elegirla? Te da control fino sobre timelines (animaciones encadenadas con tiempos exactos), funciona consistente entre navegadores y maneja bien los scroll triggers, esos efectos que se disparan a medida que la persona baja por la página.
Para usarla en Elementor, el camino limpio es Custom Code de Elementor Pro. Ahí cargás la librería GSAP y tu script, eligiendo en qué páginas se ejecuta y en qué parte del documento (header o footer). Un esqueleto mínimo de scroll trigger se ve así:
gsap.registerPlugin(ScrollTrigger);
gsap.from(".mi-elemento", {
scrollTrigger: ".mi-elemento",
y: 60,
opacity: 0,
duration: 1
});Acá viene lo bueno: agregás una clase CSS al widget de Elementor (pestaña Avanzado), y tu script GSAP la toma de referencia. El movimiento sucede solo cuando ese elemento entra en pantalla.
El tema es que GSAP suma una librería JavaScript a tu página. No es gratis en términos de peso. Reservala para cuando el efecto lo justifica, no para un simple fade que CSS resuelve con la mitad del costo. Y si vas a montar varios scripts pesados, asegurate de tener un hosting WordPress como el de Donweb que aguante sin penalizarte el TTFB.
Cómo insertar código de animación con el widget HTML
El widget HTML de Elementor es una caja vacía donde pegás lo que quieras: HTML, una etiqueta <style>, un <script> o el snippet que te da una librería externa. Es la salida cuando no tenés Elementor Pro y querés cargar código propio.
Los usos más comunes:
- Animate.css: enlazás la hoja de estilos de la librería y aplicás clases como
animate__fadeIna tus elementos. - AOS (Animate On Scroll): agregás el script y atributos
data-aospara animar elementos al entrar en viewport. - Lottie por código: si no querés usar el widget nativo, podés embeber el player de Lottie a mano.
- Snippets a medida: cualquier animación que te pasaron en un CodePen y querés probar.
La ventaja es la libertad total. La contra: estás metiendo código suelto en una página, y si pegás dos librerías que pelean entre sí, te podés comer conflictos difíciles de rastrear. Probá una cosa por vez. En impacto de Elementor en el SEO profundizamos sobre esto.
¿Sirve Elementor AI para generar animaciones sin código?
Elementor AI es la función de inteligencia artificial integrada al builder, y entre sus capacidades está generar CSS a partir de instrucciones en lenguaje natural. ¿Querés animar un título? Le escribís un prompt tipo «que aparezca con fade in y un leve crecimiento al cargar» y te devuelve el CSS listo para pegar.
Es práctico para quien no escribe código y necesita un efecto puntual sin abrir documentación. Funciona mejor con animaciones simples (fade, scale, movimientos suaves) que con secuencias complejas tipo timeline.
Tomalo con pinzas igual. La IA te da un punto de partida, no una solución pulida. Para algo de producción que tiene que verse impecable en todos los dispositivos, todavía conviene revisar (y ajustar) lo que genera. Es un asistente, no un reemplazo del criterio.
¿Qué método de animación rinde mejor en performance?
Esto importa más de lo que parece, porque Google mide la experiencia con los Core Web Vitals y una animación pesada te puede arruinar el LCP o generar saltos de layout (CLS). Acá va la comparación honesta por tipo de método.
| Método | Impacto en carga | Control | Riesgo principal |
|---|---|---|---|
| CSS / @keyframes | Bajo | Limitado | Poco; el más liviano |
| Lottie (JSON) | Medio | Medio | Peso del JSON si la animación es compleja |
| GSAP | Medio-alto | Total | Suma librería JS; cuidar dónde se carga |
| Motion Effects nativos (Pro) | Bajo-medio | Medio | Balance, pero solo en Elementor Pro |
La regla práctica: si CSS resuelve el efecto, usá CSS. Reservá GSAP para lo que de verdad lo necesita. Y sea cual sea el método, definí dimensiones fijas para el contenedor de la animación, así evitás que la página «salte» mientras carga y te penalice el CLS.
Errores comunes al importar animaciones HTML en Elementor
- Cargar tres librerías para un solo efecto. Metés GSAP, Animate.css y un Lottie en la misma página por las dudas. Resultado: la página se arrastra. Corrección: elegí un método por efecto y borrá lo que no uses.
- Ignorar el peso del JSON de Lottie. Una animación vectorial muy detallada puede pesar más que un video corto. Corrección: revisá el tamaño del archivo antes de subirlo y simplificá la animación si hace falta.
- Pegar scripts en cualquier lado. Insertar un
<script>de GSAP suelto en varios widgets duplica la carga de la librería. Corrección: cargala una sola vez vía Custom Code o en el footer del sitio. - No probar en mobile. Una animación que se ve genial en desktop puede trabarse o consumir batería en celulares viejos. Corrección: testeá en dispositivos reales y desactivá efectos pesados en mobile si hace falta.
Preguntas Frecuentes
¿Cómo importo animaciones HTML en Elementor?
Tenés cuatro vías: el widget Lottie para archivos JSON, CSS personalizado con @keyframes desde la pestaña Avanzado, GSAP cargado mediante Custom Code de Elementor Pro, o el widget HTML para pegar código de librerías externas. Elegí según la complejidad del efecto y si necesitás escribir código. Te puede servir nuestra cobertura de alternativas modernas a Elementor.
¿Qué diferencia hay entre Lottie, GSAP y CSS para animaciones?
Lottie reproduce animaciones vectoriales prefabricadas en formato JSON sin escribir código. CSS con @keyframes es liviano y sirve para efectos simples como fade o slide. GSAP es una librería JavaScript para secuencias complejas y scroll triggers, con control total a costa de sumar peso a la página.
¿Necesito Elementor Pro para animaciones complejas?
Para cargar GSAP de forma limpia sí conviene Elementor Pro, porque su función Custom Code está pensada para insertar scripts globales. Sin Pro podés lograr animaciones complejas igual usando el widget HTML, aunque tenés que manejar a mano la carga de librerías y los posibles conflictos.
¿Cuál es el mejor método para importar animaciones HTML?
No hay uno único: depende del caso. Para íconos e ilustraciones animadas, Lottie. Para transiciones simples, CSS. Para movimientos coordinados al scroll, GSAP. La recomendación general es usar el método más liviano que resuelva el efecto que buscás, por performance.
¿Cómo uso código personalizado para animar elementos?
Asignás una clase CSS al widget desde la pestaña Avanzado de Elementor y la referenciás en tu CSS o script. Para JavaScript como GSAP, cargás la librería con Custom Code (Pro) o el widget HTML, y tu script apunta a esa clase para disparar la animación.
Conclusión
Importar animaciones HTML en Elementor dejó de ser un problema de «sí o sí necesito un dev». Entre el widget Lottie, el CSS de toda la vida, GSAP para lo complejo y el widget HTML como comodín, tenés cubierto casi cualquier escenario.
El criterio que importa no es técnico, es de balance. Una animación que tarda en cargar o salta en mobile espanta más visitas de las que atrae. Empezá por lo más liviano (CSS), subí a Lottie si necesitás algo vectorial, y dejá GSAP para cuando el efecto de verdad lo pide. Y si vas a montar una página con varios scripts, probá la performance en serio antes de publicar: tu LCP te lo va a agradecer.
![BuddyNext is out: a free way to run a community on WordPress (live demo inside) [FREEMIUM] - ilustracion](https://wordpress.donweb.com/wp-content/uploads/2026/06/buddynext-plugin-wordpress-comunidades-hero-1.jpg)
![[FREE] Tired of “something’s broken” emails with no context — we shipped a free WP plugin for that - ilustracion](https://wordpress.donweb.com/wp-content/uploads/2026/06/wordpress-no-envia-emails-solucion-smtp-hero.jpg)