Guía Práctica de Animación en React

Hola a todos. Estoy muy emocionado de hablarles sobre animaciones. En nuestras interfaces web, la mayoría de los cambios ocurren instantáneamente. Haces clic en un botón y luego boom, algún contenido simplemente se teletransporta a la pantalla. Pero así no es como funcionan las cosas en el mundo real, ¿verdad? Normalmente, los cambios de estado implican algún tipo de movimiento y nuestros cerebros han sido programados para entenderlo porque hemos estado observando la física del mundo que nos rodea toda nuestra vida. Y esto puede hacer que las interfaces se sientan un poco mecánicas y desconectadas de cómo naturalmente esperamos que las cosas se comporten. Y la animación puede ayudar a cerrar esa brecha.

Puede ayudar a hacer que las interfaces de usuario se sientan más tangibles y reales y hacer cosas poderosas para la experiencia del usuario. Como aquí en la aplicación Apple Photos, cuando toco una imagen, se escala exactamente desde el lugar donde toqué, creando esta clara conexión entre la interacción y el resultado final. O esta animación cuando inicias sesión en la cuenta de Netflix donde el avatar se anima en la barra de herramientas. Al hacer eso, también comunica dónde puedes cambiar tu cuenta más tarde después de haber iniciado sesión. O piensa en la interfaz del calendario donde al hacer clic entre los botones de navegación, el contenido se desliza hacia la izquierda o hacia la derecha, comunicando dirección y dándote retroalimentación visual de hacia qué lado te estás moviendo.

Nuestros cerebros también están programados para detectar movimiento y Figma lo utiliza sacudiendo el cuadro de comentarios cuando intentas descartar un comentario sin terminar. O mira cómo Airbnb resalta información importante para los clientes cuando buscan propiedades. Si la animación no estuviera allí, sería realmente fácil pasarlo por alto. La animación también se puede usar para agregar un poco de alegría, fantasía y deleite en una interfaz de usuario que de otro modo sería estática. Mira estos iconos animados en 3D en Airbnb. O esta animación de personajes en Notion AI. Cosas como esta pueden parecer pequeñas, pero crean una conexión personal entre el usuario y la interfaz de usuario, y también les ayudan a sentirse alegres cuando están usando tu producto. Especialmente ahora cuando se vuelve cada vez más fácil generar interfaces de usuario usando herramientas de IA, la animación y mucha de esta atención al detalle realmente pueden diferenciar tu producto entre otros.

Como desarrolladores, tenemos bastantes herramientas a nuestra disposición para crear animaciones. Tenemos CSS y algunas APIs de JavaScript y APIs de la plataforma web y muchas bibliotecas. En esta charla exploraremos bastantes ejemplos prácticos sobre cómo podemos agregar movimiento significativo en nuestras interfaces de usuario y cómo podemos usar todas estas herramientas para hacerlo. Pero primero permítanme presentarme. Mi nombre es Katrina. Soy originalmente ucraniana, pero actualmente estoy sintonizando desde Tallin, Estonia. Y trabajo de forma remota en Buffer, donde dirijo nuestra dirección de front-end. Y últimamente en Buffer he estado invirtiendo cada vez más en detalles de la interfaz de usuario como este. Tenemos bastante contenido para cubrir, así que comencemos.

Y comencemos con la animación CSS. Esta es la herramienta más accesible para crear animaciones que tenemos, y es una gran base para la mayoría de las animaciones que vas a crear. En CSS, generalmente hay dos formas principales de crear animaciones. Podemos usar transiciones CSS y animaciones CSS usando keyframes. Las transiciones son las más simples, nos permiten animar propiedades cuando cambian. Como aquí estamos animando la opacidad durante una duración de 300 milisegundos al pasar el ratón. Tomando valores de inicio y fin, el navegador luego interpola todos los valores intermedios para crear una transición suave. Este proceso también se llama animación tween, de estados intermedios que el navegador necesita calcular. De esta manera podemos animar cualquier propiedad que pueda ser interpolada como transformaciones, cambios de opacidad, colores, relleno, ancho y altura, etc.

Pero a veces cuando queremos animar más que entre los dos estados, es ahí donde entran los keyframes y las animaciones CSS. Nos permiten crear animaciones reutilizables con múltiples pasos. Por ejemplo, aquí tenemos una animación de giro que aplicamos al spinner, pero luego podemos aplicar la misma animación a un elemento completamente diferente en diferentes contextos. Los keyframes son geniales para cualquier animación de entrada y salida, por ejemplo, como aquí. Nota que estoy creando un keyframe parcial donde solo defino el keyframe de inicio o fin, y luego el navegador llenará el espacio usando los propios estilos de los elementos. Luego también podemos aplicar diferentes animaciones para abrir y cerrar. Y también mira cómo aquí estoy usando una duración más larga para abrir que para cerrar. Hace que cerrar el menú se sienta mucho más rápido. También podemos crear animaciones complejas de múltiples pasos usando keyframes, como aquí, donde sacudimos el elemento rotándolo y moviéndolo varias veces a lo largo de la animación. Y luego al aplicarlo a la caja común, podemos recrear la misma animación de Figma que vimos al principio. Una gran parte que puede hacer que las animaciones CSS se sientan mucho más realistas y naturales son las funciones de temporización. Hay cinco funciones de temporización integradas y ease es la predeterminada, y esto realmente puede afectar mucho cómo se siente la animación.

Este es un buen ejemplo que puedes ver ahora mismo. Cuatro menús desplegables abriéndose al mismo tiempo, y todos tienen la misma duración, solo la función de temporización es diferente. Pero puedes sentir cómo algunos de ellos son mucho más rápidos que otros. Y ese es el poder de las funciones de temporización. Definen cómo ocurre la animación, por lo que la tasa de cambio del volumen específico. Aquí hay una comparación entre cinco funciones de temporización integradas que tenemos.

Además de las integradas, podemos crear funciones de temporización personalizadas usando curvas de Bezier cúbicas. Estas se definen al definir dos puntos que controlan cómo se ve nuestra curva. Y generalmente, aunque puedes crear tus propias curvas de Bezier, en su mayoría no tienes que hacerlo. Hay muchas personas increíbles en la comunidad que ya han creado muchas curvas que puedes simplemente copiar y pegar. Como por ejemplo, el sitio web Easing.net que tiene un conjunto extendido de curvas de Bezier cúbicas. También, hay esta herramienta llamada Easing Wizards donde puedes previsualizar y personalizar las curvas tú mismo.

Me gusta guardar estas como propiedades CSS y luego reutilizarlas para cualquier animación a lo largo de mi base de código. Aquí hay una guía rápida sobre dónde cada una de las funciones de temporización puede ser útil. Ease es la predeterminada por una buena razón. Creo que funciona muy bien para cualquier animación simple como animaciones de hover o efectos de desvanecimiento simples. Linear generalmente es, sí, lineal. Y se ve bastante antinatural porque nada en el mundo que nos rodea realmente se mueve a velocidad constante.

velocidad constante. Así que el caso de uso principal son diferentes cargadores, elementos de marquesina, animaciones de esqueleto, etcétera. Uno de mis favoritos para cualquier animación basada en interacción es la familia EaseOut del conjunto extendido. Esto generalmente comienza muy rápido y luego se desacelera hacia el final. Debido a este inicio realmente rápido, se sienten muy responsivas. Y aquí hay una comparación entre Ease y luego EaseOut exagerado. Y puedes ver que EaseOut se siente mucho más ágil.

Y ahora cubramos un poco sobre accesibilidad. Las personas con trastornos vestibulares pueden realmente experimentar mareos y náuseas por las animaciones. Y especialmente diferentes movimientos a gran escala, efectos de paralaje, giros y rotaciones, animaciones de zoom y escalado, videos y GIFs que se reproducen automáticamente pueden ser problemáticos. La mayoría de los dispositivos hoy en día permiten a los usuarios establecer su preferencia de movimiento en la configuración. Y luego tenemos acceso a la configuración dentro del CSS usando la consulta de medios Reduced Motion.

Y luego podemos desactivar la animación cuando la configuración está establecida para reducir. Pero en realidad sugeriría hacerlo al revés.

Y solo añade animación cuando sea adecuado. Una vez que adquieres el hábito de hacer eso, se vuelve algo natural, pero también es mucho menos código que mantener. Y es mucho más fácil mantener este código a largo plazo.

Ahora aquí está el resultado. Cuando no hay preferencia, tenemos la animación de pulsación. Y cuando se establece la reducción de movimiento, no tenemos ninguna animación en absoluto. Dicho esto, no necesitamos eliminar las animaciones por completo. Muchos de los cambios de opacidad y cambios de color están completamente bien.

Así que para el ejemplo del menú de antes, podemos simplemente reemplazar nuestra animación por algo más sutil, como desvanecerse y aparecer. Y como resultado, puedes ver que hay una animación de escalado por defecto. Pero luego si voy y cambio la reducción de movimiento en la configuración, puedes ver que la animación se elimina automáticamente y se reemplaza con un desvanecimiento suave. Y eso cubre la animación CSS. Esta es nuestra herramienta más utilizada, y creo que puedes crear la mayoría de las animaciones que necesitas usando CSS.

Pero también hay otra nueva API web realmente genial que quería cubrir. Y son las Vue Transitions. Vue Transitions es una API de plataforma web que ha sido pionera por el equipo de Chrome. Y ya están bastante bien soportadas entre los navegadores modernos. Están soportadas en Chrome y Safari, y pronto llegarán también a Firefox.

Pero lo mejor es que pueden usarse como una mejora progresiva, lo que significa que los navegadores más antiguos seguirían funcionando. Simplemente no obtendrían la animación, lo cual está totalmente bien. Puede que hayas visto esta demostración de Astro, que fue uno de los primeros frameworks que implementó Vue Transitions de manera nativa. Y este es el tipo de interacciones con apariencia de aplicación nativa que podemos crear con Vue Transitions.

Veamos cómo podemos hacer esto. Tengo este carrusel que cambia de consejos cuando haces clic en siguiente. Y actualmente, es bastante aburrido. El cambio simplemente ocurre instantáneamente. Para añadir la Vue Transition, solo necesitamos una línea de JavaScript. Necesitamos envolver nuestro cambio con document.startVueTransition. Por supuesto, no debemos olvidar ningún navegador que pueda no soportarlo y añadir un respaldo. Y ahora solo con esta línea, ves que hemos añadido un suave desvanecimiento cruzado entre los estados.

Para entender lo que sucede, veamos un poco bajo el capó, cómo funciona esto. Así que cuando activamos una Vue Transition, el navegador inmediatamente pausa el renderizado. Así que el usuario no ve nada. Luego toma la instantánea del estado actual antes de la transición, ejecuta tu actualización, y luego toma la instantánea después de la transición. Luego toma estas dos instantáneas y anima entre ellas. Si abres las DevTools mientras la transición está en progreso, puedes ver realmente las instantáneas apareciendo en el DOM como pseudo elementos. El navegador proporciona estilos predeterminados que crean la animación de desvanecimiento cruzado suave que has visto.

proporciona estilos predeterminados que crean la animación de desvanecimiento cruzado suave que has visto. Pero esto es algo que realmente podemos personalizar, lo cual veremos más adelante. Para usar esto en React, hay un pequeño inconveniente. Debido a que React ejecuta actualizaciones de estado de manera asincrónica, necesitamos decirle a React que aplique el cambio de estado inmediatamente, porque de lo contrario, la Vue Transition no funcionaría. Así que lo que necesitamos hacer es envolver nuestro cambio también adicionalmente con flushSync. Podemos abstraer esto en algún tipo de hook reutilizable o una función que luego podamos usar para activar las Vue Transitions.

Y también podemos personalizar la animación en sí. Así que en lugar del desvanecimiento cruzado, que es el predeterminado, puedo usar cualquier fotograma clave personalizado para esta animación. Para hacer esto, primero necesitamos decirle al navegador qué elemento necesita ser animado. Así que, por ejemplo, aquí, queremos animar la tarjeta de consejo en sí. Así que añadiremos el nombre de la Vue Transition personalizada para decirle al navegador que queremos crear una Vue Transition separada para este elemento.

Y luego podemos usar el mismo pseudo elemento para personalizar la animación aplicando el fotograma clave específico, la duración, la función de temporización, todas las cosas habituales que acabas de cubrir en la animación CSS. Podemos hacer la animación incluso más divertida, como podemos añadir este efecto de volteo cuando se cambian. Y todo esto es hecho por el navegador, y sería, por defecto, bastante eficiente. De lo contrario, una animación como esta podría haber sido bastante complicada de implementar. Pero esto es solo la punta del iceberg. Creo que las Vue Transitions se vuelven realmente poderosas cuando necesitas transformar elementos entre diferentes lugares en el DOM. Tengo esta sencilla aplicación de galería de videos. Y podrías notar que actualmente tenemos las miniaturas de video en la vista de lista. Pero luego también tenemos el reproductor de video cuando abres el video, que se ve muy similar.

Para hacer esto, podemos usar nuevamente el nombre de Vue Transition. Pero el truco aquí es que los nombres de Vue Transition necesitan ser únicos, para que el navegador sepa cómo conectar elementos entre diferentes estados. Podemos usar el ID del video para asegurarnos de que sea único. Y luego podemos aplicar el mismo nombre de Vue Transition a nuestro reproductor de video. Nota que estos son elementos completamente diferentes en diferentes partes de nuestras aplicaciones. Estos son diferentes componentes. Luego solo necesitamos envolver nuestros Cambios de Estado con StartVueTransition. Y eso es todo.

Ahora, cuando hago clic, ves cómo el navegador transforma suavemente la miniatura al elemento de video. Porque el navegador opera con instantáneas, está totalmente bien que estos sean elementos completamente diferentes. Uno es el elemento de video, y otro es una imagen. También puedes notar cómo también se anima suavemente de regreso a su lugar cuando haces clic de nuevo. El navegador recuerda esta conexión también. Por supuesto, animaciones como esta pueden ser bastante exigentes en términos de accesibilidad.

Una forma que encontré es que puedes simplemente desactivar globalmente todas las Vue Transitions que usan un nombre personalizado. Así que estaría desactivado por defecto cuando se establece una preferencia de movimiento. Por cierto, Vue Transitions también pueden funcionar entre páginas. También hay Vue Transitions de varias páginas, y de hecho están soportadas en React Router también. Para usarlo en React Router, podemos simplemente añadir una propiedad de Vue Transition al enlace, lo que indicará al React Router que envuelva este cambio de navegación con Vue Transition. Hay muchas otras funciones útiles y utilidades que proporciona de las que realmente no tengo mucho tiempo para profundizar, pero todo está cubierto en la documentación. Vue Transitions también pueden funcionar muy bien para listas.

Tengo aquí una interfaz de usuario simple para gestionar usuarios. Podemos eliminarlos y filtrarlos. Si aplico el mismo nombre de Vue Transition a cada una de las tarjetas de usuario, se pueden animar. Primero, por supuesto, necesito simplemente envolver todo con un inicio de Vue Transition, y luego puedo simplemente añadir el nombre único de Vue Transition para el elemento de la lista. Solo con hacer eso, todas estas acciones como filtrar y eliminar están animadas. Por supuesto, necesitamos usar animaciones como esta con cierta moderación, porque cuando todo se está moviendo constantemente, también puede sentirse un poco abrumador.

Normalmente, en JavaScript, crear una animación como esta habría sido bastante complicado, y nos tomó literalmente unas pocas líneas de código. Una cosa más que realmente quiero mencionar es que el equipo de React también está trabajando en el soporte incorporado de Vue Transition dentro de React mismo. Funciona sobre la misma API que acabamos de describir, pero luego React hace algunas optimizaciones bajo el capó para hacer que Vue Transitions funcionen. Para usar esta API, también hay un nuevo componente de Vue Transition que se exporta desde React. React asignará automáticamente nombres únicos de Vue Transition y propiedades CSS a los hijos, y luego llamará al inicio de Vue Transition bajo el capó cuando el contenido cambie.

Una parte clave aquí es que cuando React se activa, la Vue Transition se activará solo como parte de la transición concurrente de React. Así que cuando estamos usando algo como useDeferredValue de React, o cuando usamos una función de inicio de transición de React, o si estamos resolviendo un límite de suspense. Ahora con estos cambios, nuestra demostración anterior funciona con React también. Nota que esta característica aún no es estable, es una API experimental, pero estoy realmente emocionado de que esté llegando y se vuelva estable. Cuando lo haga, más frameworks como Next.js ya lo tienen en el soporte experimental pero también soportarán oficialmente Vue Transitions.

Y eso es Vue Transitions. Estas son súper poderosas para crear efectos de morfema de apariencia nativa y animaciones en nuestras aplicaciones, y estoy realmente emocionado de poder usar esto ahora en navegadores modernos. Así que ya hemos cubierto animaciones CSS y Vue Transitions, y ambas son herramientas muy poderosas, pero tienen algo en común. Ambas están basadas en Tween, lo que significa que defines el punto de inicio y final y la duración, y el navegador interpola los valores intermedios. Esto funciona muy bien para muchas cosas, y con una función de temporización más realista, podemos ajustar cómo se mueve el elemento y hacerlo sentir más natural.

Pero volviendo a cómo funcionan las cosas en el mundo real, así no es como funciona, ¿verdad? Cuando dejas caer algo al suelo, no defines cuánto tiempo tomará para que caiga. Caerá basado en su peso, resistencia al aire o la fuerza que apliques. Y la duración será un resultado de esta física, y no algo que pre-determines. Si lo pensamos, las animaciones CSS funcionan un poco al revés de eso. Con CSS, dices mueve esto en exactamente 300 milisegundos, independientemente de ese contexto. Y esto nos lleva a la animación basada en Spring, que es una forma de lograr animaciones de apariencia más natural en la UI.

Los Springs se sienten vivos y receptivos. Por eso las animaciones en iOS se sienten tan bien. Todas están basadas en Springs, y todo tiene un poco de peso y momento. Así que la forma en que funcionan los Springs es que puedes imaginar tu elemento atado a su posición objetivo por un resorte que lo tira hacia su posición objetivo. Y luego, dependiendo del propio resorte, si es más rígido, tirará más fuerte. Si es más flojo, tirará más suavemente. También hay resistencia del entorno y también masa del propio elemento. Y la animación es el resultado de todas estas fuerzas trabajando juntas. No tenemos mucho tiempo para profundizar en la física de los Springs, pero hay este increíble artículo de Josh que realmente recomiendo revisar que entra en mucho más detalle.

Entonces, ¿cómo usamos Springs en React? Hay muchas bibliotecas que nos permiten acceder a la física de Spring, como gsap, por ejemplo. Está React Spring y también está FramerMotion, que ahora se llama simplemente motion. Así que es la misma biblioteca, solo que renombrada. Y esta es en la que quiero centrarme.

Motion tiene una documentación increíble. También tiene una gran y extensa comunidad. Funciona con JavaScript vanilla y Vue, y tiene una API intuitiva y declarativa, y realmente me gusta. Veamos cómo podemos usarla animando este interruptor. Primero, necesitamos importar motion, y luego podemos reemplazar cualquier elemento HTML con la versión motion de ese elemento. Es básicamente un contenedor que tiene todas las mismas características del elemento nativo, pero nos agrega algunos superpoderes específicos de animación a través de props.

Por ejemplo, podemos agregar la propiedad animate, donde podemos declarar cómo debería animarse el elemento. Por ejemplo, aquí, dependiendo del estado del interruptor en sí, cambiamos la posición del pulgar del interruptor. Y ahora nuestro pulgar se animará así. Lo bueno de la física basada en Spring es lo naturales que se sienten. Por ejemplo, aquí está la comparación entre motion y CSS transition.

Cuando hago clic rápidamente, puedes ver cuán más responsivo se siente el Spring. Puede cambiar su dirección a mitad de animación de manera natural, y así se siente mucho más responsivo y vivo. Hemos cubierto algunas de las animaciones básicas de Spring con toggle, y ahora hablemos de una de las características más poderosas de motion, que son las animaciones de diseño. Nos permiten animar cambios en tamaño, posición u orden sin ningún cálculo manual.

Por ejemplo, tenemos este componente de tabs aquí, y me encantaría animar esta indicación para que se mueva cuando cambio entre las tabs. Si lo hiciera en JavaScript, necesitaría medir el ancho de cada tab, calcular su posición, animar entre ellas, manejar redimensionamientos de ventana y redimensionamientos de fuente, así que habría sido bastante trabajo. Pero con motion, es realmente fácil. Solo reemplazamos lo que tienes aquí, como una configuración básica de tabs con Redix, y un indicador absolutamente posicionado.

Solo necesitamos reemplazar nuestro span con el span de motion, y luego podemos aplicarle layout ID. Esto funciona de manera similar a las transiciones de vista, por lo que motion realmente rastreará este elemento y lo animará automáticamente entre sus diferentes posiciones y tamaños. Y ahora, solo con este cambio, cuando cambio las tabs, puedes ver que nuestro indicador se anima entre diferentes estados. Sin embargo, si miras de cerca, puedes ver que hay un pequeño fallo con el radio del borde. Esto sucede porque motion utiliza transformaciones CSS bajo el capó para crear la animación, lo que a veces introduce ciertos problemas, y el radio del borde es uno muy común.

Afortunadamente, la solución es muy simple. Solo necesitamos establecer explícitamente el radio del borde para que motion sepa tenerlo en cuenta en la animación. Y ahora, con este cambio, funciona muy suavemente. Se ve muy bien y satisfactorio, ¿verdad? Por supuesto, no ejecutaríamos la animación tan lentamente para los usuarios reales, así que hablemos un poco sobre las opciones de configuración que tenemos.

Motion nos da props de transición a través de los cuales podemos configurar el comportamiento del spring, y hay dos formas principales de configurarlo. Una es la simplificada usando la duración visual. Nota que la duración visual no es la duración real. Solo significa cuándo la mayoría de las animaciones deberían parecer completadas. Y luego, además de la duración visual, también proporcionamos un valor de bounce, que significa cuánto se pasará el elemento. Esto es muy intuitivo y funciona muy bien para animaciones más simples.

Como aquí, por ejemplo, cuando ajusto la duración visual, puedes ver cómo se ralentiza inmediatamente. Pero luego, si agregas un bounce, añade el exceso. Si reduces la duración, comienza a verse muy saltarín. Así que puedes crear una sensación completamente diferente, más juguetona versus más suave, simplemente ajustando estas dos propiedades. Y luego también podemos usar un control más avanzado a través del acceso directo a la física del spring. Esto puede parecer un poco complicado al principio, pero es un poco más fácil cuando miramos el ejemplo.

Así que cuando ajustamos stiffness, controla cuán agresivo es nuestro spring y cuán agresivamente tira. Así que puedes ver que con mayor stiffness, el elemento es tirado mucho más fuertemente. Dumping controla la resistencia del entorno. Así que oscila más o menos. Y mass controla cuán pesado es el objeto.

Y los objetos más pesados típicamente se mueven más lento. Así que puedes ver cómo solo ajustando estas propiedades, podemos crear una sensación completamente diferente de la animación. Motion también tiene esta herramienta llamada Motion Studio, donde puedes experimentar con muchos de estos valores y ver cómo afecta la animación en sí. A menudo pruebo diferentes cosas y me guío por la sensación.

Y luego con el tiempo, ayuda a desarrollar intuición sobre cómo usarlos. Por supuesto, muchas de estas animaciones son bastante distractoras. Volviendo al tema de la accesibilidad, no siempre son accesibles. Y lo bueno es que Motion nos permite deshabilitarlas por completo usando MotionConfig.

Al establecer movimiento reducido para el usuario, todos los componentes de motion automáticamente deshabilitarán todas las transformaciones y animaciones de layout, mientras preservan cualquier animación para otros valores como opacidad y color de fondo. Y en general, las animaciones de layout abren muchas posibilidades. Nos permiten animar cosas que tradicionalmente no son animables, como layouts de flex y grid, y animar entre diferentes estados. Por ejemplo, aquí hay una demostración realmente genial de la documentación de Motion.

Podemos crear animaciones como esta usando animaciones de layout en Motion. Y una última cosa para el postre que quiero cubrir es la animación de SVGs. Si has usado la aplicación de escritorio Claude, podrías notar que hay una ligera animación de los iconos cuando pasas el cursor sobre los elementos del menú. Y es realmente fácil crear animaciones como esta usando Motion.

Así que de manera similar a cómo acabamos de usar Motion Span, podemos aplicar lo mismo a Motion Path. Y luego si animamos la longitud del path, por ejemplo, podemos crear animaciones dibujadas a mano como esta. Esto es súper fácil y el efecto es muy agradable. También podemos, si hay múltiples elementos SVG, animarlos por separado también.