Animaciones Lottie con Elementor

¿Conoces las animaciones de Lottie, creadas por el equipo técnico de AirBNB? En esta Meetup de Elementor Madrid Ángel Zinsel hace un repaso completo a todas las opciones de Lottie con Elementor.

Además, si quieres profundizar en el tema de las animaciones personalizadas, en la segunda parte de la charla imparte un completo taller de Lottie con After Effects.

Elemendas.com patrocina esta Meetup

Indice

¿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.

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).

Sobre el ponente:

Ángel Zinsel

Creación web, comunidades y oratoria son las 3 palabras que definen profesionalmente a Ángel Zinsel.

Además de ser líder de la Meetup de Elementor Madrid, es miembro destacado de la Comunidad WordPress en España y uno de los fundadores de Elemendas.com

Entérate de todas las novedades del universo Elementor en Elemendas.com

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Responsable: Santiago Becerra Carrillo, titular del website elemendas.com.
  • Finalidad: Enviarte notificaciones por e-mail con novedades de plugins y temas relacionadas con WordPress y Elementor.
  • Legitimación: Consentimiento del interesado (es decir, tú), al enviar el formulario.
  • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. En todo caso, los datos que nos facilitas están ubicados en servidores cuya sede se encuentra dentro del territorio de la UE o gestionados por Encargados de Tratamiento acogidos al acuerdo “Privacy Shield”, aprobado por el Comité Europeo de Protección de Datos. Nuestro proveedor de envío de mail es MailerLite.
  • Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Últimas entradas en el blog de Elemendas

Otros meetups de Elementor