La pregunta que me hago más frecuentemente, qué herramienta de animación recomendaría ?

He trabajado con una pocas de ellas, y he de contarte que no hay respuesta correcta. Es una pregunta complicada y una complicada respuesta. Esta publicación sirve para clarificar qué usar y cuando, usar la herramienta correcta para el trabajo que estés realizando.

No hay forma posible de pasar una a una por todas las librerías de animación que existen, así que voy a ir comentando las que he usado o más me han resultado interesantes. Tened en cuenta que estas son mis recomendaciones basadas en mis propias experiencias y la web, al igual que todo, tiene muchos puntos de vista y muchas experiencias y opiniones diferentes, por supuesto.

Animación Nativa

Antes de que hablemos de cualquier librería, veamos algunas implementaciones nativas de animación. La mayoría de librerías usan tecnologías de animación nativas, superficiales de todos modos, así que cuanto más profundizas acerca de estas, estarás más capacitado de usar la opción más correcta para trabajos más complejos.

CSS

CSS sigue siendo una de mis formas favoritas para animar. Lo he estado usando durante años y sigue siendo muy rápido y práctico gracias a su legibilidad y rendimiento excelente, las animaciones CSS hacen posible transiciones entre los diferentes estados manipulando un conjunto determinado de fotogramas.

Pros:

  • No necesitas una librería externa.
  • El rendimiento es magnífico, sobre todo gracias a una aceleración por hardware completamente transparente (descargado a la GPU). Aquí te muestro un artículo sobre las propiedades que te ayudarán a hacerlo.
  • Preprocesadores (tales como Sass o Less) te permiten crear variables (para crear, por ejemplo, funciones de aceleración o frecuencia de administración) que mantienen la coherencia del código, jugando con las pseudo clases (:nth-child) en funciones para producir efectos sorprendentes.
  • Puedes estar a la escucha con onAnimationEnd y algunos otros bloques de animación con JavaScript Nativo.
  • Es fácil usarlo para un desarrollo responsive porque puedes modificar tu animación con media-queries

Contras:

  • Las curvas Bezier pueden llegar a ser un poco restrictivas. Con sólo 2 manejadores para dar forma al Bezier, no se puede producir algunos efectos físicos complejos que resultan agradables para un movimiento realista (aunque no suele ser necesario de una forma frecuente).
  • Si vas más allá de encadenar 3 animaciones en una fila, es aconsejable pasar a JavaScript. La secuenciación en CSS se vuelve compleja con retrasos y al final resulta tedioso por la necesidad de una gran cantidad de cálculos para ajustar los tiempos. Puedes echar un vistazo a este pen de Val que ilustra lo que pretendo decir. Los tambaleos de figuras y letras son más fáciles de escribir en JavaScript. Creando eventos en JavaScript nativo resultan más fáciles las creaciones para estos efectos, pero ya estamos hablando de mezclar tecnologías y no es lo ideal ni lo que buscaba con este post. Animaciones largas, complejas y secuenciales son más sencillas de leer y escribir en JavaScript.
  • Todavía no existe soporte completo para todos los navegadores. Puedes votar para que den soporte a Firefox aquí. El soporte para Safari ya es otra historia, es una cosa más individual. Me he registrado para rellenar un informe de errores y me han pedido un trazado de movimientos en CSS, os lo comento por curiosidad.

CANVAS

Canvas es asombroso para conseguir esos píxeles en movimiento! Existen multitud de ejemplos mostrados en CodePen por grandes especialistas que dominan Canvas. Como su nombre indica, Canvas ofrece un espacio visual de secuencias de comandos, en el que se pueden crear dibujos complejos y su interacción, todos con un alto rendimiento de representación.

Pros:

  • Puesto que no nos estamos moviendo desde el DOM, sino más bien en un masa de píxeles (lienzo virtual), es posible recrear una serie de animaciones complejas sin sacrificar el rendimiento ni la carga.
  • Canvas es muy agradable con la interacción. Si ya te encuentras en JavaScript, Canvas te ofrece un gran control sin tener que intercambiar contextos.
  • El rendimiento es muy bueno. Especialmente considerando lo que puedes hacer.
  • El límite de creación con Canvas se encuentra en el límite de tu creatividad.

Contras:

  • Es complicado hacerlo accesible. Tendríamos que usar otra herramienta como React para crear un DOM, que Flipboard se encargó de hacer hace un tiempo, aunque el estudio de su caso requería más trabajo por hacer.
  • Resulta poco intuitivo de hacer Responsive. Con esto no me refiero a hacer un pequeño proyecto para smartphones, porque eso lo hace muy bien. Me refiero al movimiento y reorganización de contenido basado en la ventana gráfica. Seguro que existen buenos desarrolladores que lo hacen con facilidad, pero diría que no resulta muy sencillo.
  • No está preparado para retina. A diferencia de la animación SVG que es independiente de la resolución, la mayoría de animaciones de Canvas observo que no son nítidas en pantallas retina.
  • Puede resultar difícil de depurar. Cuando se produce un fallo en lo que se está construyendo, el error no se muestra, como cuando es una animación en el DOM, donde las cosas se encuentra ahí, y solo es que se comportan de forma extraña.
  • CSS + Animaciones SVG tiene algunos efectos extraños de comportamiento. Un ejemplo es que el navegador Safari provoca efectos extraños cuando combinas opacidad y transformaciones. Otra es definición de la transformación de origen, cuando se aplican secuencialmente pueden aparecer de una forma poco intuitiva. Es la forma en que la especificación está escrita. Esperemos que SVG 2 mejore esto, ya que por ahora la combinación de CSS y SVG en dispositivos móviles requiere de extraños parcheos para hacer que funcionen correctamente.

SMIL

SMIL es una especificación nativa de animación en SVG. Te permite mover, transformar y hasta interactuar con SVGs directamente dentro del DOM SVG. Existen muchísimos pros y contras para trabajar con SMIL y el mayor handicap que veo para omitirlo todo es el siguiente: Está perdiendo soporte.

API ANIMACIONES WEB

La API de Animaciones Web es un JavaScript nativo que permite crear animaciones secuenciales más complejas sin cargar scripts externos. Lo veremos, de todos modos, cuando crezca el soporte. Por ahora probablemente necesites polyfill. Esta API nativa fue creada como un complemento de todas las grandes librerías y el trabajo que la gente ya estaba realizando con JavaScript en la web. Esto es parte de un movimiento para alinear el rendimiento de las animaciones CSS y la flexibilidad de la secuenciación en JavaScript bajo una misma base.

Pros:

  • La secuenciación es fácil y muy legible. Podeis ver este ejemplo de Dan Wilson en Codepen que compara los fotogramas en CSS y la API de Animaciones Web.
  • El rendimiento parece estar en camino de ser muy bueno. No lo he probado por mí mismo pero lo tengo pendiente.

Contras:

  • De momento no tiene un gran soporte. Esto, como sabemos, se encuentra en contínuo cambio, al igual que las especificaciones W3C. De momento es aconsejable no usarlo en entornos de producción.

WEBGL

Hay algunas cosas extraordinarias que WebGL puede realizar. Es realmente bueno en efectos interactivos y 3D, por ejemplo, si ves la figura de un hombre soplando con la boca abierta probablemente estará realizada con WebGL. Puedes echar un vistazo a alguna de estas demos. Técnicamente se utiliza Canvas, pero me gusta hacer distinción porque resulta interesante separar conceptos y tecnologías y su especialización.

Pros:

  • Maravillosos efectos visuales
  • La interacción 3D es introducirse en un Nuevo Mundo.
  • Aceleración por Hardware.
  • Posibilidades de Realidad Virtual

Contras:

  • Más complejo de aprender que otras animaciones nativas que os he mostrado hasta ahora. Las dos primeras animaciones que realicé pensé que no funcionaban porque tenía la cámara dirigida a un punto equivocado (vaya). También existen pocos libros y artículos buenos que expliquen cómo trabajar con ella correctamente, aunque se encuentra en contínuo crecimiento.
  • Complicado de hacer responsive. La mayoría de sitios web que he visto que usan WebGL te aconsejan que “por favor, ver esta web en pantalla de escritorio”.

LIBRERÍAS EXTERNAS

GREENSOCK (GSAP)

GreenSock es de lejos mi librería favorita para trabajar. En especial me gusta por SVG. El API de Animación de GreenSock tiene tantas ventajas que no acabaría nunca para numerarlas y posee un montón de documentos, foros y una gran comunidad para explorar.

Pros:

  • Sorprende su extraordinario rendimiento para algo que no es nativo.
  • Las herramientas de secuenciación (como las lineas de tiempo) son tan fáciles de leer como de escribir. Es muy sencillo ajustar los tiempos, tiene muchas cosas que unifican etiquetas relativas, e incluso acelerar y frenar tus animaciones con una simple línea de código.
  • Posee una gran cantidad de plugins como, por ejemplo, realizar cosas espectaculares como animar textos, transformación de SVGs o dibujar trazados.
  • Su trayectoria a través del plugin Bezier tiene un gran soporte disponible.
  • Resuelve los problemas de SVG a través del navegador, por fin, ya era hora. En especial para dispositivos móviles existe documentación muy buena en este post.
  • Ellos ofrecen realmente, transiciones muy realistas.
  • Simplemente entre dos números enteros, se pueden hacer filtros animados SVG con un estilo fresco y conseguir unos efectos impresionantes, e incluso trabajar en canvas. Tu mente pone el límite de lo que puedes animar con esta librería.
  • GSAP es la única librería de animación, incluyendo el nativo SMIL, que permite transformar datos de trayectoria con una cantidad impar de puntos. Esto ha abierto nuevas posibilidades para la cinemática y el movimiento.

Contras:

  • Tienes que pagar por licencias, si estás revendiendo tu producto a varios usuarios (aplicaciones y sitios con acceso de pago). No es lo más común en la mayoría de casos.
  • Al igual que cualquier librería externa, hay que ir comprobando la versión que estás usando en producción. Cuando salen nuevas versiones, la actualización implica algunas pruebas (como cualquier librería). También hay que considerar el tamaño de la librería.

VELOCITYJS

VelocityJs ofrece una gran cantidad de similitudes con lo que hace GreenSock, pero sin tanto bombo y platillo. Realmente ya no uso Velocity debido a las desventajas que indico más abajo. La sintaxis de Velocity se ve un poco como JQuery, así que si ya has estado usando JQuery te resultará familiar.

Pros:

  • Encadenar un montón de animaciones es mucho más fácil que en CSS.
  • Para refinar las aceleraciones hay transiciones paso a paso donde se puede pasar un array.
  • La documentación resulta muy agradable y fácil para aprender y empezar a usarlo.

Contras:

  • El rendimiento no es muy bueno. A pesar de gente que opina lo contrario, cuando realicé mis propias pruebas descubrí que en realidad no se mantiene. Yo sugiero que realices tus propias pruebas, ya que la web siempre está en movimiento y esta publicación queda congelada en el tiempo.
  • GSAP tiene más para ofrecer, en cuanto a estabilidad y rendimiento a través de navegadores sin mayor peso. También puedo decir que JQuery posee bajas tasas de rendimiento en tests realizados, pero podría haber cambiado desde la inclusión de RAF, con lo cual Velocity no es tan malo de todas formas, pero es inferior en la comparación.
  • Desde mi conocimiento puedo decir, que esta librería no sigue siendo mantenida. He oido que Julian Shapiro (el credor) ha pasado el proyecto a otra persona, por lo que podría hacer su reaparición en algún momento de un futuro próximo.

JQUERY

JQuery no es exclusivamente una librería de animación, pero tiene métodos de animación y una grandiosa comunidad que lo usa, con lo cual veía imprescindible incluirlo.

Pros:

  • Muchísimas webs lo incluyen y sus librerías se cargan en los ordenadores y lo más usual es que se lea sin ningún problema.
  • La sintaxis es realmente sencilla de leer y escribir.
  • Se ha mudado recientemente a requestAnimationFrame, por lo que a partir de la versión 3.0.0 el rendimiento es superior que en anteriores versiones.

Contras:

  • Las versiones 3.0.0 el rendimiento no es muy bueno y no se recomienda. No he testeado esto de una forma seria, pero viendo la consola de la ventana de herramientas de desarrollo de Chrome puedes verlo con tus propios ojos.
  • Las animaciones no soportan SVG en ninguna versión.
  • JQuery esta limitado al DOM, a diferencia de herramientas como GSAP que funcionan en todo.

SNAP.SVG

Mucha gente piensa en Snap como una librería de animación, pero nunca fue pensada para ello. Yo iba a ejecutar pruebas de rendimiento en el complemento, pero incluso Dmitri Baranovskly (autor de Snap.svg con un talento e inteligencia increibles, y su predecesor Rafael) dice en SVG Inmersion Podcast que no es la herramienta adecuada para esto y me lo comentó en un mensaje:

Solo una nota: Snap no es una librería de animación y siempre aconsejo usarla junto a GSAP cuando necesites crear animaciones serias.

Dicho esto, JQuery no combina bien con SVG, aunque ahora son compatibles con operaciones con clases. Si no tienes que realizar ningún tipo de manipulación DOM con SVG, Snap resulta impresionante para ello.

Una librería llamada SnapFoo ha sido lanzada recientemente y complementa la parte de animación a Snap. No he testeado aún, pero pinta muy bien y merece la pena darle una oportunidad. Si lo pruebas, no dudes dejarme tus comentarios en este post.

MO.JS

Se trata de una librería que tiene un compañero inseparable, LegoMushroom. Es una librería de animación de gran poder, y ya posee algunas demos de la librería en la cuales se puede observar su potencial. La librería se encuentra todavía en fase beta y se está trabajando muy activamente en ella (y me refiero de forma activa, ya que el repositorio actualiza continuamente con cada vez más movimiento).

No he trabajado personalmente con ella, pero actualizaré el post cuando lo haga. Lo más emocionante es lo simple que es malear las transiciones cuando se pasan los datos en la trayectoria SVG. Puedes comprobar como se extienden. Veo que tiene un futuro prometedor y se ve una herramienta muy buena. Recalco que la herramienta se encuentra algo verde, está en continuo cambio y podría no estar lista para un entorno de producción todavía. Tendré que seguirla de cerca para observar sus progresos.

THREE.JS

Three.js es una bonita herramienta de animación en 3D. Puedes echar un vistazo a alguno de estos ejemplos. No he trabajado mucho con ella, así que tampoco puedo hablar mucho de la misma, pero cuando sepa más prometo actualizar el post. La gente suele hablar de Three.js y WebGL nativo en conjunto.

BODYMOVIN’

Bodymovin’ está destinado a la construcción de animaciones en Adobe After Effects que puedes exportar fácilmente en SVG y JavaScript. Algunas de las demos son realmente impresionantes. No trabajo con ella porque me gusta mucho construir cosas desde cero con código, pero si eres más diseñador que desarrollador, esta herramienta probablemente te encantará. El único problema que veo es que si tienes que modificar el proyecto más adelante, tienes que volver a exportarlo. Esto podría implicar un flujo de trabajo extraño. También el código resultante es algo espeso, poco intuitivo, pero no he visto que afecte al rendimiento en todo caso, eso le da un punto a su favor.

 

FLUJOS DE TRABAJO ESPECÍFICOS DE REACT

Antes que empiece a hablaros de React, voy a explicaros por qué hay que tratar las animaciones en React de forma diferente. DOM significa Modelo de Objeto de Documento (Document Object Model). Es la forma en que creamos un documento estructurado con objetos, unidos por nodos que serían como las ramas de un árbol. React interactúa con un DOM virtual, que es diferente a la implementación de DOM nativo de un navegador. Es una generalización.

React usa un DOM Virtual por una serie de razones, siendo la más común la capacidad de averiguar qué ha cambiado y actualizar sólo las partes que necesita. Esta abstracción tiene un coste y alguno de los trucos que antes estabas acostumbrado a usar te dará problemas en un entorno React. JQuery por ejemplo, no combina bien con React, ya que la función principal de este radica en interactuar y manipular el DOM Nativo del navegador. Incluso he visto algunos comportamientos extraños en CSS. Estas son algunas de mis recomendaciones para buenas animaciones en un flujo de trabajo React.

REACT-MOTION

React-Motion es una forma muy popular para animar en React, y la comunidad lo ha adoptado sobre la vieja ReactCSSTransitionGroup que solía ser utilizado con mayor frecuencia. Me gusta mucho, pero hay algunos puntos clave para trabajar con él que si no consigues superarlos, tendrás verdaderos quebraderos de cabeza.

Rect-Motion es muy similar a la animación basada para juegos, donde se aplica una masa de elementos y la física y se envía por ese camino dándole movimiento jugando, y se pone allí cuando llegue allí. Lo que significa que no tienes un tiempo específico como en CSS o cualquier otro movimiento secuencial tradicional basado en la web. Esta es una manera muy diferente de pensar acerca de la animación. Esto puede significar que el movimiento tiene la capacidad de parecer realmente realístico y puede resulta muy bonito. Pero los UIs (interface para el usuario) tienen distintas necesidades que los juegos, con lo cual trabajar con esto puede ser complicado. Digamos que tienes dos cosas distintas que lanzas de forma independiente y finalizan al mismo tiempo en el mismo punto. Puede ser complicado alinearlas con exactitud.

Hasta hace poco no había secuenciación disponible. Apenas hace unos días, Cheng Lou añadió en onRest, lo que permite este tipo de flujo de trabajo con retorno. Todavía no es fácil escribir un bucle sin equivocarse escribiendo un bucle infinito (malo). Puede que no necesites esto, pero pensé que podía venir al caso.

Pros

  • La animación puede resultar muy bella y realista, y las opciones de elasticidad son agradables
  • El efecto de escalonamiento es bastante agradable. También se encuentra disponible en la mayoría de librerías JS, pero este se crea basándose en el último movimiento, no mediante la duplicación, por lo que resultan más suaves las posibilidades del movimiento.
  • La inclusión de onRest es un gran problema. Garantiza una cierta secuencia que no estaba disponible antes, así que si te fijas en las demos, no podrás ver todo el potencial que ofrece.
  • Considero que en estos momentos, esta herramienta es la que combina mejor para animaciones con React.

Contras

  • No es super plug-and-play como otras librerías o herramientas nativas lo son, entendiendo que tendrás que escribir un poco más de código. Esto tiene sus seguidores y detractores. Sin embargo no es aconsejable para principiantes.
  • La secuenciación, debido a la naturaleza compleja del código, no son tan directas o legibles que algunas de las alternativas.
  • onRest no funciona todavía para parámetros de escalonamiento.

GSAP EN REACT

GreenSock tiene tanto que ofrecer que no merece la pena aún utilizarlo en un entorno React. Esto resulta particularmente cierto para secuenciaciones más complejas, donde React-Motion no ofrece una solución fina mientras GreenSock destaca. Es necesario pulirlo un poco más de lo habitual, y algunas cosas que deberían funcionar y hacer con el DOM, no en React. Dicho esto, pienso que React y GSAP pueden seguir por caminos distintos y descubrir como combinarlos perfectamente.

  1. Enganchar dentro de los métodos del ciclo de vida de los componentes de React. Así se puede hacer.
  2. Crear una función que tiene una linea de tiempo y luego llamar a esa función dentro de algo que se use para la interacción. Se puede tener un controlador de eventos en linea como onClick(), y dentro de la función personalizada que se tiene para ello, se llama a otra función que tiene una linea de tiempo dentro de ella. En una configuración JQuery o vanillaJS, sería interesante hacer una pausa en la linea de tiempo de reproducción desde la fuente y repetir el lanzamiento, pero no tiene por qué hacerse así.
  3. Aquí hay un interesante post que Chang Wang escribió acerca de cómo engancharlos al ReactTransitionGroup(), que es una buena manera de hacerlo.
  4. Se puede utilizar una librería como React-Gsap-Enhancer. No he trabajado demasiado con ella, pero hay demos muy interesantes.

CSS EN REACT

Las animaciones CSS han tenido un poco de resurgimiento últimamente debido probablemente a que es la forma más fácil de realizar animaciones en React. Me gusta trabajar con ellas para pequeñas cosas, como interacciones UI / UX. He observado que se comportan de una forma extraña cuando se intenta encadenar cosas usando retrasos. A parte de eso resulta muy amigable, especialmente para pequeños ajustes de interfaz de usuario. En términos de animaciones del mundo real en la web, a veces CSS es como la Navaja de Ocklam.

 

CONCLUSION

Toda esta recopilación ha sido a base de pruebas de animación y la opinión es completamente personal, tras muchos quebraderos de cabeza, fuerza bruta y trabajando mucho haciendo pruebas con estas tecnologías. Estamos de acuerdo que todos no compartimos las mismas opiniones. No existe ninguna razón en particular al decantarme por algunas tecnologías más que otras, excepto, y repito que a base de pruebas, teniendo en cuenta su versatilidad, rendimiento y facilidad de uso. Espero que esta información te pueda ahorra algo de tiempo para elegir una u otra.

Fuente: CSSTricks