¿Qué son las animaciones Lottie?
El proyecto de Lottie nació como una librería de animaciones vectoriales creada por el equipo técnico de AirBNB.
AirBNB necesitaba una serie de características muy concretas para las animaciones de su página web y aplicaciones. Y las alternativas del mercado no las cubrían.
Querían animaciones rápidas, vectoriales, escalables, ligeras y multiplataforma.
Así que desarrollaron Lottie, que cumple con todas ellas, y lo liberaron en GitHub.
A partir de ahí surgieron muchos proyectos y repositorios de animaciones.
Y el ecosistema de Elementor fue uno de los primeros en adaptarse a Lottie.
Charlotte «Lotte» Reiniger, origen de Lottie
Primera curiosidad del día, ¿Sabes de donde viene el nombre de Lottie?
Le pusieron el nombre en honor a Charlote «Lotte» Reiniger, una pionera de la animación que en 1926 estrenó la película animada The Prince Ahmed, 10 años antes que Walt Disney.
Muy interesante sin duda la historia de esta cineasta alemana.
Todo sobre Lottie
Alternativas a Lottie
Hasta la aparición de Lottie, las posibilidades de tener animaciones en nuestra web pasaban por:
- Animaciones hechas a medida.
- Vídeos o GIFs animados (con un peso bastante alto)
- Secuencias de PNG animados por JS o CSS
- Algunos proyectos alternativos como h5p
Disparadores para animaciones
Conocemos como disparador a la acción con la que se activa la animación de Lottie. Y tendríamos 4 tipos diferentes:
- Viewport: la animación se activa en el momento que entra a visualizarse en pantalla.
- Clic: la animación se activa cuando el usuario hace clic sobre el elemento.
- Al pasar por encima: la animación se activa en el momento que el usuario interactúa con ella pasando el ratón.
- Scroll vertical: uno de los más visuales e interactivos. La animación acompaña el movimiento del scroll vertical de la ventana del navegador.
Después, como veremos, el final de la animación puede depender de cómo esté programada o del plugin que utilicemos para incluir Lottie en Elementor.
Recursos para Lottie
Algunos enlaces de interés sobre Lottie:
- Lottiefiles: repositorio de animaciones Lottie. Hay versiones gratuitas y también un marketplace para comprar animaciones.
- Lottieflow: animaciones Lottie para proyectos en Webflow
- Lordicon: iconos animados (versiones gratuita y premium)
- 9 Squares: proyecto con 9 animaciones muy visuales e interesantes.
- Motion Corpse: plataforma con animaciones publicadas de manera anónima.
- Animography: Mobilo es un proyecto de Animography sobre animación de tipografías.
Otros recursos chulos sobre Lottie:
Lottie para Elementor
Ahora que ya tenemos el contexto y los recursos… ¿Cómo incluir Lottie en nuestras webs con Elementor?
Tenemos varias alternativas y plugins que ya tienen soporte para Lottie dentro del ecosistema de Elementor.
Ángel nos da un repaso y nos cuenta lo que más y menos le gusta de cada uno:
Animentor
Animentor sería la opción más sencilla de añadir Lottie si usas la versión gratuita de Elementor.
- Lo bueno de Animentor:
- Es gratis.
- Es específico y solo incluye un widget.
- Permite descargar y utilizar los ficheros .json que carguemos en nuestra Biblioteca de Medios de WordPress.
- Lo malo de Animentor:
- Tiene opciones limitadas.
- No aporta nada nuevo.
- Tienes más info sobre Animentor en el repositorio de WordPress.
Widgetkit
Widgetkit es una colección de widgets para Elementor que tiene versiones gratuita y premium.
Su principal característica es la especialización en widgets para sistemas LMS y WooCommerce.
En cuanto a Lottie:
- Lo bueno de Widgetkit:
- Es gratis
- Muy similar a las opciones de Elementor PRO
- Permite usar ficheros .json directamente desde la Biblioteca de Medios de WordPress
- Lo malo de Widgetkit:
- Opciones limitadas
- No permite filtros CSS sobre las animaciones
- No tiene animación en scroll
- Si solo queremos Lottie… mejor Animentor, que es más específico.
- Más información sobre Widgetkit en su web.
The Plus Addons
Otra colección de widgets para Elementor y que incluye varias características sobre Lottie que no tiene Elementor PRO:
- Lo bueno de The Plus Addons:
- Puedes elegir animaciones diferentes de entrada y salida
- Soporta animación en scroll
- La animación al pasar por encima se puede activar a nivel de sección, columna o widget.
- Permite aplicar filtros CSS
- Lo malo de The Plus Addons:
- Solo acepta enlace o código, no podemos subir los json
- Demasiadas opciones, es un poco confuso.
- Carga librerías js adicionales.
- Funciona extraño al combinar con animaciones Lottie de Elementor PRO
- No se previsualizan las animaciones en el editor de Elementor
- Más info sobre The Plus Addons en su web.
Premium Addons
Una de las colecciones de widgets para Elementor más utilizadas.
Premium Addons tiene funcionalidades para Lottie tanto en su versión gratuita como en la versión de pago.
- Lo bueno de Premium Addons:
- Versión gratuita y versión mejorada de pago.
- En la versión PRO puedes añadir Lottie a nivel de sección y en cualquier widget.
- Soporta filtros CSS
- Lo malo de Premium Addons:
- No accede a la Biblioteca de Medios de WordPress.
- No tiene animación en scroll
- Más información sobre Premium Addons en su web.
- Y este interesante artículo para mejorar las prestaciones cuando tienes muchas animaciones Lottie
Elementor PRO
Versión muy esperada desde su anuncio en febrero. La versión 2.10 de Elementor PRO hace una implementación muy completa y correcta de Lottie.
Esperamos más funciones y que se generalice en otros puntos del editor, no solo a nivel de widget.
- Lo bueno de Elementor PRO:
- No necesitas un plugin adicional.
- Soporta scroll vertical
- Ajustes muy claros y variados.
- Soporta filtros CSS
- Lo malo de Elementor PRO:
- Está en la versión de pago
- Solo permite implementarlo como widget
- Más información sobre Elementor PRO y Lottie, en la web oficial.
Lordicon
Lordicon es una librería de iconos en formato .json compatible con Lottie. Muy interesante como concepto con «aspiración» a reemplazar a Font Awesome en un futuro. ¿Lo conseguirá?
- Lo bueno de Lordicon:
- 50 iconos gratis.
- Soporte nativo y directo con bloques de Gutenberg
- Mucha personalización.
- Soporta filtros CSS
- Lo malo de Lordicon:
- No tiene widget para Elementor.
- No es 100% compatible con Lottie
- Más información sobre Lordicon en su web.
Cómo hacer animaciones Lottie con After Effects [TALLER]
Si estás pensando dar tus primeros pasos con animaciones Lottie personalizadas, en la segunda parte de la meetup sobre Lottie para Elementor, Ángel Zinsel dio un completo taller sobre After Effects.
After Effects es el programa más adecuado para la generación de las animaciones de Lottie.
En este taller aprenderás conceptos básicos sobre animación, capas, líneas de tiempo…
Y también cómo hacer tu primera animación para Lottie y cómo exportarla para usarla directamente en tu web con Elementor.
¿Ya estás utilizando Lottie en tus proyectos de Elementor? ¿Qué te parecen este tipo de animaciones? Esperamos tus comentarios 😉
Y, si aún no estás dentro, suscríbete a nuestra newsletter para estar al día de las novedades del universo Elementor.
Ángel es uno de los mendas. Y su amor por Lottie hace que hablemos sobre este tipo de animaciones cada dos por tres.
Te esperamos en la próxima newsletter.
El lunes. A las 10:15 (más o menos).
