Crear Animaciones en After Effects para Web
Los pasos esenciales para diseñar animaciones en After Effects y exportarlas correctamente para tu sitio web.
Qué es Lottie y Cómo Funciona
Una introducción completa a los archivos JSON de Lottie y cómo integrarlos en tu sitio web sin complicaciones.
Las animaciones que pesan casi nada
Si alguna vez has visto esas animaciones suaves en un sitio web que se cargan instantáneamente, probablemente estés mirando a Lottie. No es magia. Es JSON. Y es mucho más simple de lo que parece.
Lottie es un formato abierto que Airbnb creó para renderizar animaciones en tiempo real, directamente en el navegador. Las animaciones se guardan como archivos de texto (JSON), lo que significa que son increíblemente ligeras comparadas con videos o GIFs.
95%
más ligero que video
5KB
tamaño típico
60fps
fluidez garantizada
Cómo funciona realmente Lottie
El proceso es bastante directo. Un diseñador crea una animación en After Effects. Luego, usa un plugin especial (Body Movin) que exporta esa animación como un archivo JSON. Ese archivo contiene toda la información: posiciones, colores, duraciones, curvas de animación. Todo en texto puro.
El navegador recibe ese JSON y una librería JavaScript (también llamada Lottie) lo interpreta y lo dibuja en el canvas. No necesita descargar un video de 2MB. No necesita un GIF pixelado. Solo texto, matemáticas, y tu navegador hace el trabajo.
Por eso Lottie es tan rápido. El navegador entiende la estructura de la animación, puede escalarla a cualquier tamaño sin perder calidad, y puede cambiar colores dinámicamente si lo necesitas.
El plugin Body Movin: tu puente hacia Lottie
Body Movin es el puente entre After Effects y el mundo real. Sin él, las animaciones en AE se quedarían atrapadas en Adobe. Pero con Body Movin, exportas esa animación como JSON.
El plugin es gratuito, muy popular, y funciona así: creas tu animación normalmente en After Effects, seleccionas las capas que quieres exportar, y presionas un botón. Body Movin genera un archivo .json que contiene cada fotograma, cada movimiento, cada cambio de color. Luego subes ese archivo a tu servidor web.
- Exporta en segundos, sin comprensión manual
- Preserva todas las propiedades de la animación
- Compatible con múltiples plataformas web
Artículos relacionados
Ventajas que no puedes ignorar
Por qué Lottie se ha convertido en el estándar? Porque resuelve problemas reales. Un video de 5 segundos fácilmente pesa 2-3MB. Un GIF de la misma duración ronda 1-2MB. Un archivo Lottie típico? 10-50KB. La diferencia es abismal.
Además, Lottie es escalable. No importa si la muestras en un teléfono o en una pantalla 4K, la animación se ve perfecta. Los vectores se adaptan automáticamente. Y puedes cambiar colores dinámicamente sin regenerar la animación.
1
Archivo minúsculo
Tamaños de 5-50KB. Sin exagerar. Comparado con video o GIF, es una décima parte.
2
Escalabilidad infinita
Vectorial por naturaleza. Aumenta el tamaño sin perder nitidez.
3
Control dinámico
Cambia colores, velocidad, e incluso interactividad con JavaScript.
Nota importante
Este artículo es informativo y educativo. Los detalles técnicos aquí descritos se basan en las características actuales de Lottie a junio de 2026. La compatibilidad del navegador y el rendimiento pueden variar según tu configuración específica, versión de navegador y dispositivo. Recomendamos probar tus animaciones Lottie en múltiples navegadores y dispositivos antes de implementarlas en producción.
El futuro de las animaciones web es ahora
Lottie no es solo una herramienta. Es una forma diferente de pensar en las animaciones web. Ligero, escalable, controlable. Los diseñadores crean en After Effects. Los desarrolladores integran el JSON. Los usuarios ven animaciones suaves sin esperar a que se cargue un video.
Si trabajas con animaciones web, Lottie debería estar en tu toolkit. Ya sea que recién empieces o lleves años haciendo esto, entender cómo funciona Lottie te abrirá posibilidades que antes no imaginabas. Y lo mejor es que es completamente gratuito.
Listo para empezar con tus propias animaciones Lottie?
Aprende a crear animaciones en After Effects