Lottie vs Keyshape

Por Igor Ustarroz Diseñador en Secuoyas

No somos pocos los que echamos de menos Flash. Desde que Steve Jobs apostó por erradicarlo, la salud del entorno web ha mejorado enormemente, pero muchos diseñadores sentimos que no ha llegado un digno sucesor en el ámbito de la animación web. Y resulta un poco triste, sobre todo viendo los programas tan potentes que están surgiendo para otras industrias afines.

Dentro de esta nueva era tan estática, tan flat y tan material design, ha llamado nuestra atención un site muy especial. Waaark; la página que vino a demostrar que se podían construir bellos sites animados con tecnología actual. Y lo más importante, hacerlo sin perder de vista los pilares sagrados del desarrollo web contemporáneo, como la accesibilidad, el multidispositivo o el rendimiento. Esta web llamó mucho la atención y más de un experto se dedicó a despiezarla por ingeniería inversa para descubrir cómo se había conseguido. La respuesta era Lottie.

Lottie

Hernan Torrisi, creó una manera de trasladar animaciones bidimensionales creadas con After Effects en SVG animables compatibles con la web. Lottie es muy popular ahora mismo, Airbnb decidió apadrinar el invento y hoy día hay miles de personas creando interesantes animaciones.

Lottie es un plugin estupendo porque te permite liberar el masivo potencial de After Effects y redireccionarlo hacia proyectos web. After Effects es un programa magnífico con el que se puede crear casi cualquier efecto especial visto en cine y televisión. Aunque hay que tener en cuenta que la mayoría de estas capacidades están orientadas a efectos con archivos de mapas de bits, y SVG es un archivo vectorial, con lo que realmente sólo podremos disfrutar de una pequeña parte de las capacidades de After Effects vinculadas con formatos vectoriales. Aún así lleva existiendo muchos años y es un programa muy abierto en el que mucha gente ha contribuido haciendo plugins tan increíbles como RubberHose, o Josticks and Sliders, que simplifican sobremanera el trabajo de animación del día a día.

Mi experiencia con Lottie

Para hablaros de cosas concretas quiero contaros la historia de esta pequeña animación que hicimos en Secuoyas para ilustrar el funcionamiento interno de uno de nuestros clientes:

Ilustración por Alex Monge

Como veis es una animación sencilla, vectorial y en bucle. Nos interesaba probar estas nuevas tecnologías y ver cómo podíamos incluirlas en nuestro proceso de trabajo habitual. A continuación resumo parte de lo aprendido.

Notas de uso de Lottie

• After Effects no es compatible con SVG, tienes que pasar por Adobe Illustrator para integrar vectores.
• Organiza cada escena en un artboard. Crea artboards extra con todos los fotogramas clave y elementos extra que necesites. Los artboards serán exportados a After Effects como composiciones. Utiliza este plugin.
• Renombra semánticamente todas las capas en Sketch.
• Los textos no se exportan. Tendrás que rehacerlos en After Effects.
• Los gradientes no se exportan. Con Illustrator tampoco. Los “gradient stroke” no están soportados, conviértelos en formas.
• El desenfoque no está soportado.
• Ten cuidado con los objetos rotados porque After Effects los vuelve a poner a 0. Un workaround es agruparlos, rotarlos, desagruparlos e ir haciendo flatten a cada capa para resetear a 0 el rotado.
• Los objetos combined shape se trasladan con problemas. Es mejor volverlos flatten.
• Merge path no está soportado por Lottie. Lo más fácil es hacerles una muesca microscópica. Transformando así un donut, en una C.
• Las máscaras de más de una capa en Lottie son un dolor de cabeza, recomiendo hacer flatten a los objetos enmascarados.
• En teoría las expresiones de loop funcionan, aunque suele ser difícil hacerlas funcionar, así que acabo repitiendo frames ad infinitum.
• Si quieres animar un elemento concreto de varios colores en After Effects, exporta por separado y luego ve copiando el “contenidos/grupo”, de cada forma en la misma capa. O si es demasiado complejo, guárdalo como SVG y pásalo a AI, donde podrás exportarlo unido a After Effects.
• Deja un artboard en Sketch para piezas que puedas ir necesitando, luego expórtalo sólo a After Effects como composición y copia esas piezas en tus compos buenas.
• Las animaciones con curvas de easing funcionan mucho mejor. Yo he usado dos plugins para conseguirlo: Easy y Wizz.
• Para que funcione la exportación, tienes que tener estas opciones de exportación marcadas en Lottie: “Glyphs, Hidden, Guides”.

Resultado HTML en Lottie

Obtienes un JSON con la información del SVG que puedes llamar desde un HTML y hacerlo funcionar con el javascript de Lottie. Hay muchas opciones de control y es muy fácil ir a un fotograma concreto, reproducir marcha atrás y otras opciones estupendas.

Resumen de Lottie

Si eres un experto animador en After Effects, Lottie es para ti. Si no, es muy posible que te veas sobrecogido por su arcaica usabilidad y pierdas mucho tiempo preparando los archivos. En mi opinión para la mayoría de la gente puede ser matar moscas a cañonazos ya que, aunque tiene opciones de animación muy válidas, la mayoría de los proyectos no las necesitan. Eso sí, la calidad de la integración HTML final está fuera de toda duda.

Keyshape

Keyshape es como un Flash moderno para realizar SVG animados sin demasiadas complicaciones. Carece de muchas de las opciones avanzadas de animación de After Effects como el rigging, pero es compatible con SVG, lo que reduce prácticamente a cero el tiempo de preparación de los archivos para animar. Y el propio proceso de animación no puede ser más sencillo.

Mi experiencia con Keyshape

Después de tres días conseguí terminar mi animación en After Effects y y se me ocurrió poner a prueba Keyshape reiniciando el proceso desde cero. Esto es lo que aprendí:

Notas de uso de Keyshape 1.8

• Para empezar a trabajar, crea un SVG en Sketch e impórtalo a Keyshape.
• Es muy importante preparar el Sketch primero nombrando todas las capas semánticamente, para enterarse luego de qué estás animando.
• Nunca llames a las capas “3-popup”, si no “popup-3”. Recuerda que las clases CSS no pueden empezar por números.
• Los objetos de las capas siempre existen en la composición. Tienes la opción de animarlos o no. Si no quieres que salgan al principio, ponles alpha 0 y luego muéstralas.
• Los símbolos funcionan como películas aparte. “object/symbol/convert to symbol”. Problemas: los símbolos se reproducen a la vez, hay que cambiar su tamaño para que entre la animación (desde la lista de capas con el objeto superior) o produce errores de reproducción, los elementos se cortan. Todos estos problemas desaparecen al hacer “detach symbol”. Se guardan en una carpeta llamada <defs> del inspector del SVG visible abajo a la derecha. Tienes que arrastrar los símbolos de <def> a la película para animarlos.
• Loop. Selecciona cualquier animación. Pulsa el icono de engranaje abajo del todo e “iterate propierty/Infinite”.
• Máscaras. “Coge dos objetos/object/masking and cliping/make clip path”.
• Animación de borde. Para hacer que se auto dibuje: “propiedades de objeto/advanced stroke/dash ‘total’ y offset 0 -> dash ‘total’ y offset ‘total’ ”.
• Animación de forma. Deben ser path editables. Puedes copiar una forma completamente diferente en otro fotograma, pero si no tiene el mismo número de puntos saldrá algo deforme.
• “Object/reverse path” y “start node” ayuda mucho a definir la orientación de una animación de forma.
• Animación guiada por un trazado. En Keyshape no existe esta posibilidad.
• Exportar: La exportación pura CSS es sólo compatible al 100% con Chrome, ni siquiera Safari. La exportación JS es bastante compatible con todo. La exportación de GIF y vídeo requieren hacer detach de todos los símbolos muchas veces o producirá errores de visionado.
• Invertir frames “animation/reverse animation”.

Resultado HTML en Keyshape

Keyshape permite exportar simplemente como un SVG con el código de animación interno. Lo que en teoría lo hace muy versátil pero lamentablemente muchas de las características de animación de SVG no están muy soportadas así que es mejor utilizar la vertiente JS de Keyshape. Que desde la actualización 1.8 ha mejorado mucho, acercándose un poco más a la maravilla de control que tiene Lottie.

Resumen de Keyshape

Tardé solo 2 horas 🤩 en terminar mi animación. Keyshape se ha convertido en mi herramienta de animación preferida para hacer mini animaciones sin demasiadas pretensiones. Se tarda poco y el resultado es estupendo. Eso sí, para cosas más complejas como hacer que un personaje ande o reaccione a la gravedad, tendréis que pasar por After Effects.

Otras opciones

He limitado mi análisis a estos dos programas porque mi objetivo era encontrar una solución con la que realizar micro animaciones bidimensionales que intercalar entre las etiquetas HTML de nuestros proyectos. Pero soy consciente de que existen otras opciones de animación también muy válidas.

De hecho puede que el formato de vídeo sea suficiente para ti, desde que iOS relajó su especificación para poder hacer autoplay en su vídeos, es mucho más fácil implementarlos en cualquier proyecto. Aunque no sirven para todo, ahora mismo no hay una manera compatible de hacer un vídeo con fondo transparente, por ejemplo.

Y si estás buscando cosas más avanzadas como VR o aplicaciones 3D Three.js o Webassembly pueden ayudarte a conseguir lo que buscas.

Para terminar, si estás interesado en el mundo de los SVG animados, tienes dudas o sugerencias por favor, házmelo saber en los comentarios.

Y por supuesto, también te recomiendo echar un ojo al resto de artículos que hemos publicado en Pause.