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.
Tutorial Intermedio
Crear Animaciones en After Effects para Web
Aprende los pasos esenciales para diseñar animaciones en After Effects y exportarlas como archivos Lottie listos para tu proyecto web.
Por qué After Effects para Animaciones Web?
After Effects es el estándar de la industria para crear animaciones complejas. Si querés exportarlas a la web, necesitás convertirlas a formato Lottie — un formato JSON ligero que funciona en cualquier navegador sin necesidad de plugins.
El proceso no es tan complicado como parece. En este tutorial te mostraré exactamente cómo hacer animaciones en After Effects y prepararlas para tu sitio web. Vamos paso a paso.
1
Preparar tu Composición en After Effects
Primero, necesitás una composición bien estructurada. Importá tus elementos gráficos — pueden ser archivos SVG, PNG con transparencia, o shapes nativos de After Effects.
La clave está en organizar tus capas. Cada capa debe tener un propósito claro: fondo, iconos, textos, elementos decorativos. Si tenés todo desordenado, la exportación a Lottie va a ser un quilombo.
- Usá nombres descriptivos en las capas (no “Capa 1”, “Capa 2”)
- Agrupa elementos relacionados en carpetas de composición
- Borrá capas que no necesitás — cada capa extra aumenta el tamaño del archivo
- Configurá la resolución según tu uso (1920×1080 para web es estándar)
2
Animar con Fotogramas Clave
Los fotogramas clave son la base de cualquier animación. Establecés un punto en el tiempo, cambias las propiedades de una capa (posición, escala, rotación, opacidad), y After Effects genera el movimiento intermedio automáticamente.
La mayoría de animaciones web usan movimientos simples: apariciones suaves, cambios de tamaño, desplazamientos. No necesitás animaciones complejas con efectos raros. Menos es más en la web.
Consejo: Mantén tus animaciones entre 1 y 3 segundos. Cualquier cosa más larga cansa al usuario. Probá la duración varias veces antes de exportar.
3
Exportar a Lottie con Bodymovin
Acá viene la magia. Necesitás instalar Bodymovin, un plugin gratuito que convierte tus composiciones de After Effects a JSON de Lottie. Sin este plugin, no hay forma de exportar directamente.
Descargalo desde GitHub (aescripts/aescripts-bodymovin) e instalalo en tu After Effects. Cuando lo abras, verás una ventana nueva con opciones de exportación.
- Abrí tu composición terminada en After Effects
- Andá a Ventana Extensiones Bodymovin
- Seleccioná tu composición de la lista
- Clickeá “Render” y elegí dónde guardar el archivo JSON
Artículos Relacionados
Nota Importante
Este artículo proporciona información educativa sobre cómo crear y exportar animaciones en After Effects. Los pasos descritos se basan en las versiones actuales del software y pueden variar según tu versión específica. Te recomendamos siempre consultar la documentación oficial de Adobe After Effects y Bodymovin para obtener los detalles más actualizados. Los resultados pueden variar según tu configuración, hardware y habilidades previas.
Lo que Aprendiste Hoy
Ya tenés las herramientas para crear animaciones en After Effects y exportarlas a Lottie. El proceso es directo: organiza bien tus capas, anima con fotogramas clave, y exportá con Bodymovin. Una vez que tenés el archivo JSON, podés integrarlo en cualquier proyecto web.
Lo importante es practicar. Hacé animaciones simples primero — apariciones, escalados, movimientos suaves. Después podés ir agregando complejidad. Y acordate: en la web, menos es más. Una animación rápida y limpia siempre va a verse mejor que algo sobrecargado.
Necesitás Ayuda con tu Proyecto?
Si tenés dudas sobre cómo integrar Lottie en tu sitio web o necesitás animaciones personalizadas, contáctanos. Estamos acá para ayudarte.
Enviar Mensaje