Oliver Servín
Desarrollador y creador
Oliver Servín

Animación Web

Todas mis notas sobre animación web con conceptos y tips de uso.

Notas

*Shared Layouts* con Framer Motion.

Otra funcionalidad de Framer Motion es shared layouts, que lo que hace es como una ilusión óptica porque reemplaza la animación entre varios objetos instantáneamente.

Como por ejemplo en un componente de menú donde el efecto hover del background cambia de posición según qué elemento del menú estemos señalando.

En realidad, lo que hace es que la animación del efecto hover comienza cuando hacemos hover sobre un elemento y cuando hacemos hover sobre otro elemento, termina la animación anterior y comienza la animación del nuevo elemento, pero desde donde haya terminado la que se había iniciado anteriormente.

Es por esto que el efecto parece una ilusión óptica de que es una sola animación sin importar sobre qué elemento hayamos hecho hover.

Animaciones `layout` con Framer Motion.

Algo sorprendente de Framer Motion es la funcionalidad de animaciones de layout porque nos permite animar el posicionamiento de objetos que con CSS no es posible, como animar objetos que tengan flex y cambiar el valor de justify.

Con Framer Motion es increíblemente fácil al solo agregar el atributo layout al elemento que queremos animar.

Framer Motion vs. otras librerías.

Lo bueno de utilizar Framer Motion es que no requiere de mucho código para implementar animaciones; sin embargo, es difícil de depurar. La documentación es algo sencilla y los ejemplos solo te muestran el "happy path".

En la documentación realmente no te muestra cómo implementar animaciones complejas.

Para la mayoría de las animaciones es posible implementarlas con CSS, pero requiere de mucho más trabajo para llevarlas a cabo. Utilizando una librería como Framer Motion es posible reducir bastante el código necesario para implementar animaciones.

Existen otras librerías como React Spring que también incluye animaciones "spring". Además, la librería es bastante configurable y el tamaño es menor que Framer Motion; sin embargo, requiere de más tiempo y de más código para implementar animaciones.

Otra opción es la librería GSAP. Como ventaja, tiene que se puede utilizar con cualquier framework, pero no soporta animaciones "spring" y además su uso requiere de una licencia de pago para aplicaciones comerciales.

Framer Motion en general es una buena librería porque soporta animaciones "spring" y animaciones del tipo "layout" y requiere de poco código para implementar. Lo malo es que la librería puede ser bastante pesada, Framer Motion oculta mucha magia de cómo funciona y esto hace que pueda ser difícil de depurar cuando algo no funciona como se esperaba.

Gusto.

Las animaciones requieren de tener gusto. Es difícil explicar qué es el gusto, pero podría decirse que es cuando se logra tener alguna preferencia sobre la estética de algo.

Otra forma de describir el gusto es como opiniones intuitivas que podemos justificar o explicar.

Para desarrollar un gusto sobre cómo crear o añadir animaciones se requiere práctica. Debemos crear algo y estar satisfechos con el resultado; quizá el resultado no sea el que esperabas, pero con la práctica continua, los resultados irán mejorando poco a poco.

Para mejorar, como en cualquier oficio, los buenos diseñadores analizan buenos diseños. Debes rodearte de trabajo sobresaliente para crear algo que también sea sobresaliente.

Las mejores animaciones se crean a partir de una gran cantidad de pequeños detalles. Por lo tanto, la práctica es indispensable para poder ver y crear esos pequeños detalles.

Duración y propósito.

Las animaciones deben ir acompañadas de un propósito y duración. Por ejemplo, las animaciones hover sobre objetos deben ser rápidas.

Como guía, las animaciones del tipo hover deben durar 150 ms, las animaciones para modales y popovers deben durar 200 ms para mostrar el objeto y 150 ms al desaparecer.

Para cualquier otro tipo de animación, la duración debe ser discrecional y depender del objeto que deseamos animar. Por ejemplo, animar objetos grandes usualmente requiere que la duración sea también grande.

Cuando se piensa en animar un objeto, debe hacerse con cuidado ya que al no hacerlo adecuadamente entonces perderá impacto. Como regla general, una animación debe añadir contexto, como implementar una animación en objetos que cambien de estado.

Cuando se piensa en animaciones, también se debe considerar la cantidad de veces que el usuario verá la animación. Por ejemplo, la aplicación de Raycast no tiene animaciones; esto es porque la app se abrirá constantemente y si se añaden animaciones, después de un uso frecuente comenzarán a percibirse las animaciones como lentas, porque esperamos una respuesta rápida.

Normalmente implementaremos animaciones en elementos que el usuario está acostumbrado y espera que se animen. También agregaremos animaciones cuando añadan contexto o un elemento de deleite.

Al final, las animaciones deben dar una impresión de buen gusto y de elegancia.

Animaciones *spring*, no siempre es posible.

Si todo es maravilloso con las animaciones spring, entonces ¿por qué no utilizarlas en vez de una animación de easing?

Primero, porque en CSS no es posible crear animaciones spring. Es posible utilizar librerías como Framer o React Spring para poder implementarlas, pero el tamaño de estas librerías es muy grande.

Y probablemente solo se quiera aplicar animaciones spring a pequeños elementos como botones o switches, por lo que añadir una librería grande para esos elementos parecería excesivo. Como casi en todo, utilizar o no esas librerías depende del uso que queramos dar.

Animaciones *spring*.

Las animaciones utilizando easing las definimos mediante una curva y una duración para imitar un movimiento natural. Pero también existen animaciones spring que dan una apariencia aún más natural, como las de un organismo vivo. Se usan ampliamente en iOS y son la animación aplicada por defecto.

Para configurar una animación spring es necesario establecer valores como masa, tensión y velocidad, pero estos valores son un poco complicados de establecer ya que estamos trabajando con objetos que no son reales. Esto hace que configurar una animación spring sea difícil o complicado.

Sin embargo, en iOS es posible establecer una animación spring con únicamente establecer una duración y un bounce. Esto lo hace más fácil.

Otra característica de las animaciones spring es que es posible interrumpir la animación y aun así sentir que la animación siguiente se vea suave y natural. Esto se puede apreciar más cuando utilizamos animaciones spring en objetos en los que podemos cambiar de posición en cualquier momento. A diferencia de las animaciones en CSS, en donde no podemos interrumpir animaciones.

Si utilizamos animaciones spring, es recomendable utilizar un valor para el bounce que sea muy pequeño, aunque aún más recomendable sería no utilizar ningún valor de bounce. Esto es para no aumentar el tiempo en que una animación tarde en completarse.

Guía de qué animaciones aplicar.

Una guía para saber qué tipo de animación debemos aplicar entre easing, easing-out, easing-inout, linear o ease es la siguiente:

  • Easing-out es el tipo de animación que se utiliza la mayoría de las veces. Es perfecto para iniciar animaciones cuando el usuario realiza alguna interacción y es perfecto para mostrar modales o menús desplegables.
  • Easing-inout para mover objetos que ya existan en el documento.
  • Easing-in debe evitarse la mayoría de las veces ya que da la sensación de una interfaz lenta.
  • Linear también debe evitarse y utilizarse más bien para indicadores de carga como spinners o para animar objetos en los que el usuario no realiza ninguna interacción.
  • Ease para cuando aplicamos efectos tipo hover en los botones o enlaces.

easings.co es un buen recurso para personalizar las tasas de easing para las animaciones.

Qué es *easing*.

Aprender qué es easing es esencial para implementar animaciones.

Easing básicamente es la tasa de cambio al aplicar animaciones, pero es muy importante tener buenos valores de tasa de cambio ya que pueden ser determinantes para hacer que una interfaz dé la percepción de ser rápida.

Y la rapidez es lo más importante a tomar en cuenta en cuanto a animaciones.

Animar objectos on *easing*.

Para animar objetos, en vez de utilizar una animación lineal, debemos utilizar una animación de easing tanto al comenzar la animación como al terminarla.

Esto es porque en el mundo real, si movemos un objeto, primero aumentamos su aceleración y para detenerlo disminuimos la aceleración poco a poco.

En Swift las animaciones son más fáciles.

En general, implementar animaciones de iPhone con Swift es más fácil que hacerlas en aplicaciones web.

Animaciones con significado.

Las animaciones deben tener un significado, es decir, deben estar enlazadas a alguna acción en específico.

Si no se utilizan las animaciones de forma adecuada, en vez de dar una sensación positiva, puede resultar más bien lo opuesto y sobrecargar la experiencia.

Aplicar adecuadamente animaciones requiere de gusto.

Técnica de *easing*.

Para hacer que una animación se sienta bien, se debe emplear una animación de easing ya que esto lo hace verse más natural. Si intentamos utilizar una animación lineal, tendrá una apariencia poco natural o robótica.

Las aplicaciones en iPhone utilizan la misma técnica de easing para dar una sensación natural a las animaciones y las hacen sentir más humanas.