El equipo de diseño de Airbnb creó Lottie en 2017 para facilitar que los desarrolladores añadieran animaciones de Adobe After Effects a la web, iOS y Android. Hoy damos un paso más allá, haciendo que sea más fácil para todos añadir animaciones avanzadas de Adobe After Effects y Lottie a sus sitios web de forma visual, con las interacciones de Webflow, sin necesidad de escribir código JavaScript.
Cómo funciona esta integración con Lottie
Animaciones de After Effects... en sitios de Webflow. Genial, ¿pero cómo funciona realmente? Aquí tienes lo esencial:
- Añade el plugin bodymovin a After Effects, luego exporta tus animaciones como archivos JSON de Lottie
- Sube los archivos JSON de Lottie a Webflow
- Controla la reproducción de las animaciones de Lottie con la potencia de las interacciones de Webflow
Para profundizar en cómo usar esto en tus proyectos de Webflow, echa un vistazo a nuestra serie del nuevo curso de Lottie en Webflow University.
Por qué creamos esta integración
Creamos esta integración de After Effects/Lottie con Webflow por 2 razones principales:
1. Rendimiento de animación mejorado
El conjunto de herramientas de interacciones y animaciones de Webflow ya es bastante potente, y hemos visto sitios realmente increíbles creados con él. Pero tiene sus límites.
A fin de cuentas, si intentas crear animaciones sofisticadas con muchas partes móviles, animar elementos tradicionales de HTML y CSS en Webflow puede complicarse rápidamente. Además, las animaciones grandes y complejas en Webflow pueden ralentizar mucho una página, provocando cargas lentas o experiencias incompletas para los usuarios con conexiones más lentas.
After Effects, por otro lado, es una herramienta diseñada específicamente para crear animaciones sofisticadas y complejas, por lo que puede ser mucho más eficiente que intentar hacerlo todo en Webflow. Además, las animaciones de After Effects, cuando se sirven en sitios web como archivos JSON de Lottie, son exponencialmente más ligeras y tienen un mejor rendimiento que las animaciones creadas con elementos HTML y CSS estándar.
2. Potenciar a más personas sin código
Más allá de estas razones prácticas basadas en el rendimiento, también queríamos llevar el trabajo del equipo de diseño de Airbnb un paso más allá y permitir que aún más personas añadan animaciones de After Effects a sus sitios a través de Lottie, pero sin necesidad de escribir ni una línea de JavaScript.
El lanzamiento de Lottie en 2017 ayudó mucho a dar a los diseñadores y animadores un control más preciso sobre las animaciones en la web, iOS y Android, haciendo que fuera tan sencillo como entregar a sus desarrolladores un archivo JSON para "insertar" en el lugar correcto de la aplicación o sitio web. Pero, aun así, este proceso de implementación sigue dependiendo de los desarrolladores, ya que requiere conocimientos detallados de JavaScript para lograr algo más allá de una reproducción básica.
La integración de hoy con las interacciones de Webflow traslada este proceso de implementación a una herramienta totalmente visual y sin código, permitiendo que diseñadores, animadores (¡y sí, también desarrolladores!) pasen del concepto a la animación web publicada utilizando solo herramientas visuales.
Lo que puedes crear
Consejo profesional: para ver más de cerca estas animaciones y obtener más materiales de aprendizaje, consulta nuestro curso en Webflow University (más detalles a continuación).
Animaciones de carga de página
¿Quieres crear una animación atractiva para mostrar a tus visitantes antes de que cargue la página? Es sencillo: elige tu animación de After Effects y controla su reproducción con una interacción basada en el momento en que la página termina de cargar.
Animaciones al hacer scroll
Animar un archivo de After Effects mientras haces scroll por la página puede ser una forma genial de lucir esa animación del pingüino bajo la lluvia que tenías guardada.
Animaciones al hacer clic
Lleva tus llamadas a la acción al siguiente nivel con una animación interactiva al hacer clic.
Secuencias de imágenes animadas al hacer scroll
Ejemplo extra: toma un video de Cinema 4D, impórtalo como una secuencia de imágenes a After Effects, expórtalo mediante bodymovin y luego insértalo en tu sitio de Webflow usando el modo de renderizado canvas. Después, anímalo al hacer scroll. ¡Boom!
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Recursos para empezar
Por supuesto, no todos somos animadores de After Effects. Así que pensamos en reunir algunas guías y recursos para ayudarte a empezar con Lottie en tus sitios.
Curso de Webflow University
Para ayudarte a ponerte en marcha con esta integración, nuestro curso en Webflow University incluye:
- 5 animaciones de After Effects descargables
- Archivos JSON de Lottie para las 5 animaciones
- Un video tutorial para cada una que te muestra cómo añadirla a tu sitio y controlar su reproducción con las interacciones de Webflow
- Un sitio de Webflow clonable con la animación
¿Eres nuevo en After Effects? El curso también incluye un video de introducción a After Effects que cubre los conceptos básicos para crear una animación y exportarla como archivo Lottie.
LottieFiles
¿Quieres encontrar más animaciones de After Effects para incluir en tus sitios o simplemente para experimentar? Nos hemos asociado con nuestros amigos de LottieFiles, una comunidad increíble de animadores que ponen su trabajo a disposición para descarga gratuita y uso bajo una licencia Creative Commons, en un conjunto seleccionado de animaciones para usuarios de Webflow. Además, acaban de lanzar un editor web gratuito que te permite personalizar los colores de las capas de animación antes de exportar; es una pasada.
Más sobre After Effects y Lottie
Si quieres sumergirte por primera vez en el mundo de After Effects, te recomendamos echar un vistazo a algunos tutoriales sobre animaciones vectoriales. Y si quieres saber más sobre la creación de Lottie por parte de Airbnb, el mejor lugar para empezar es su publicación de anuncio original.
Estamos deseando ver lo que construyes con esta nueva integración. ¡Cuéntanos qué has creado en los comentarios!
