Evolution of Web Animations

♪♪♪ Me estoy haciendo viejo. Hablando de envejecer, ¿quién recuerda esto? ¿Cómo se sienten tus rodillas y tu espalda? ¿Has tomado tu Advil hoy? En serio, MacroMedia Flash, para aquellos que no lo sabían, fue lo mejor que le pudo haber pasado al desarrollo web. Moriré en esa colina. Creo que es genial. Al igual que moriré en la colina de los índices OneBase.

MacroMedia Flash fue genial porque no solo podías invitar a tus amigos diseñadores que sabían cómo hacer que las cosas se vieran geniales, sino que te daban esta pequeña cosa genial aquí arriba en la parte superior llamada línea de tiempo. Para aquellos que no tuvieron la oportunidad de experimentar Flash en todo su esplendor, una línea de tiempo te permitía tomar, digamos, un círculo. Podría ser solo un objeto, podría ser algún texto, podría ser cualquier cosa. Podías seleccionar el punto en la línea de tiempo donde querías que tu objeto, como cuánto tiempo querías que durara una animación. Moverías tu objeto a esa línea de tiempo, moverías el objeto en el espacio, seleccionarías la línea de tiempo y luego dirías, crear interpolación de animación. Y luego, cuando presionabas play, simplemente se movía. Y podías hacer muchas otras cosas con esto. Como deformarlo en una forma completamente diferente. Flash era realmente genial en ese caso y perdimos mucho de lo bueno que Flash trajo a la web. Sin embargo, estamos empezando a recuperarlo. Así que vamos a hablar sobre animaciones en la web, cómo puedes hacerlas simples, cómo puedes hacerlas mejores.

No me encuentras mucho en Twitter estos días. Estoy en el sitio Cooler Blue Sky. Si no estás en Blue Sky, únete. Es mucho más divertido y agradable allí. Pero vamos a sumergirnos en las animaciones. Las animaciones en la web han tenido una historia muy, muy divertida. Rápido, levanten la mano, o no levanten la mano, quien quiera gritarlo primero, ¿qué navegador tuvo el primer soporte de animación? ¿Alguien? Todos están equivocados. Fue Internet Explorer. Internet Explorer. Internet Explorer. Internet Explorer. Todas las alegrías de Internet Explorer 5.5. Ahora te estarás preguntando, Mike, ¿cómo sucedió esto? ¿Cómo obtuvimos animaciones en Internet Explorer? Internet Explorer se lanzó con esta etiqueta meta realmente genial. Porque esto fue alrededor de la época en que todavía enviábamos archivos HTML separados para todas nuestras diferentes rutas.

Era un tiempo más simple. Era un mejor tiempo. Pero te daban esta meta tag donde podías definir una animación de Entrada y una de Salida animación. Le darías el HTTP equiv. Luego establecerías el contenido para ser una transición de revelado, ya sea de tres segundos, 500 milisegundos. Y luego para la transición, realmente tenías todas estas transiciones integradas proporcionadas por el navegador para animar cosas de izquierda a derecha, derecha a izquierda, haciendo ese bonito pequeño círculo crecer en el medio. Realmente, cosas de primera categoría que existían en 1999, 2000. Cosas realmente geniales.

Y luego Internet Explorer 5.5 murió. Y perdimos esta animación. No volveríamos a ver animaciones hasta que obtuvimos animaciones de keyframe en la web, aproximadamente alrededor de 2007. Y esto fue algo que Safari tuvo primero. No escuchamos eso a menudo, pero Safari tuvo algo primero, amigos. Con las animaciones de keyframe, definirías un punto de inicio y uno de fin. Y luego usando CSS, podrías definir esa animación dentro de tu código. Ahora, esto era genial, porque podías simplemente codificarlo y luego hacer que la animación se reprodujera y despegara. Pero la animación carecía de mucho control detallado. No podías realmente capturarla a mitad de animación. Estabas un poco por tu cuenta.

Las animaciones en JavaScript llegaron después de eso, donde básicamente re-implementaron un motor de animación en JavaScript. Y probablemente el que la gente más conoce es GreenSock. Hay casi una docena de bibliotecas de animación por ahí. jQueryAnimate, ¿alguien? Lo divertido de estas es que la animación simplemente funcionaría, pero tendrías tanto JavaScript para hacer cosas simples como esta. Si alguien alguna vez echó un vistazo a jQueryAnimate para una lectura divertida de viernes por la noche, su línea de tiempo de animación es un set timeout. No hiciste nada. Nadie se sorprendió por eso. Sí, gracias. Set timeout para una línea de tiempo de animación es terrible, especialmente porque esto fue antes de que tuviéramos requestAnimationFrame. Así que el código era muy lento. Era genial para la época.

Pero al intentar ejecutarlo en cosas modernas, vas a ver el impacto en el rendimiento. Luego obtuvimos Web Animations, que salieron unos años después. Web Animation tomó todas las ideas de GreenSock, todas estas bibliotecas de animación de JavaScript, y las incorporó directamente en el navegador. Así que todo esto es solo un código de animación muy simple.

Tenemos una colección de esferas. Queremos animarlas. Vamos a darles algunos key frames. Vamos a establecer algunos tiempos. Vamos a usar esta elegante curva cúbica de Bézier. Y luego vamos a animar todo y desfasarlo para que cuando se reproduzcan, tengamos este bonito efecto de animación escalonada.

Pero lo genial es que podemos pausar esto. Podemos darle a reproducir. Podemos capturar cosas justo cuando ves el efecto de aplastamiento y estiramiento o el efecto de estiramiento y aplastamiento de este ciclo de animación. Así que todo esto es parte de la plataforma. Todo es genial.

El punto doloroso con esto es que al intentar coordinar todas estas animaciones, vas a estar escribiendo mucho más JavaScript para que las interacciones ocurran. Quieres que se reproduzca una animación. Y luego, una vez que eso termine, quieres desencadenar otra animación. No hay una gran manera de hacer eso aparte de simplemente esperar esa transición.

Así que hay una mejor manera de hacer esto hoy en día, y eso son las transiciones de vista. Las transiciones de vista, si no has oído hablar de ellas, probablemente sean lo más genial que ha llegado a la web. Ahora, una definición muy, muy técnica de lo que son las transiciones de vista. La API de transiciones de vista proporciona un mecanismo para crear fácilmente transiciones animadas entre diferentes estados del DOM mientras también se actualizan los contenidos del DOM en un solo paso. Actualizas el DOM, y hará la transición entre los diferentes estados. Bastante fácil.

Podemos pensar en ello como simplemente obtener los cambios del DOM y luego la instantánea entre los dos. Pero para las personas a las que les gusta ver visuales, digamos que tenemos una lista de elementos. Queremos eliminar una lista, un elemento de la lista. Lo eliminamos del DOM. El navegador detectará que eso ha cambiado y realmente hará la transición entre todos los diferentes estados.

Bastante genial. {{^}}Bastante genial. Pero, ¿qué significa eso realmente? Todo comienza con este document.startViewTransition. Ahora, la transición de vista inicial es solo una función. Acepta un callback. Podría ser una promise. Pero todo lo que realmente hace es decir, oye, algo va a suceder aquí. Vamos a rastrearlo. Así que solo tenemos un diseño simple aquí. Es solo un círculo. Y vamos a cambiar aleatoriamente la propiedad de alineación en esta cuadrícula.

Así que tenemos startViewTransition. Y ahora tenemos una transición. No es una gran transición porque es solo un desvanecimiento. Pero es mejor que no hacer nada. Así que estamos rastreando esto. Estamos obteniendo una pequeña instantánea de eso. ¿Qué pasa si queremos hacer algo más? Bueno, podríamos usar esta propiedad viewTransitionName en CSS para decirle al navegador, oye, esta cosa va a cambiar su posición. Deberíamos rastrearlo. Así que la misma demo exacta. Lo único que se ha agregado, viewTransitionName. El problema con aleatorio es que a veces te dará los mismos valores exactos, así que no puedes decir. Pero al hacer clic, no estamos codificando ninguna de las animaciones que están sucediendo aquí. Es simplemente el navegador sabiendo que estaba aquí, estoy aquí, descúbrelo, lo cual es genial.

Incluso podemos ir un paso más allá haciendo algo que era un dolor de hacer en las web animations. Y eso es animateDisplayNone. Esta es una demo tan buena. Fue de un amigo mío, Adam Argyle, que trabaja en el equipo de Chrome. Ni siquiera quise reescribirla. Es literalmente una tabla periódica.

Así que vamos a alejarnos rápidamente. Vamos a filtrar cualquier elemento aquí que no sea un metal. Transiciones. Vamos a obtener todos los que tienen el sufijo EM. Ahora vamos a cambiar su orden. Nada en este código realmente controla los pasos de animación. Solo está cambiando algunas propiedades de orden en la cuadrícula misma.

Incluso podemos eliminar este super elegante Adam mostrando tipo de temporización de animación. Y podemos verlo un poco más claro. No obtenemos ninguno de los saltos. Todo eso es increíble porque ahora puedo simplemente cambiar el diseño. Y no me importa cómo eso va a afectar o qué debería hacer el navegador. No te rindas.

Ahora dije cómo esto está funcionando, es que está usando instantáneas. Básicamente, startViewTransitions mira el DOM, y realmente tomará una estructura DOM aplanada y creará este pseudo árbol llamado ViewTransitions. Cada elemento aquí es un ejemplo de esa caja, así que todos los elementos que estaban listados allí. Ahora dentro de cada uno de estos grupos, obtenemos un par. Obtenemos un viejo y un nuevo. Así que ahora si queremos animar algo que estaba saliendo, bueno, asumimos que solo habrá un viejo. Y no habrá una cosa nueva que esté allí. Así que podemos codificar ese CSS específicamente usando solo child. También podemos hacer eso para nuevo si lo contrario es cierto, si solo queremos animar cosas que están entrando en el DOM.

Ahora, por muy genial que sea ese ejemplo de la tabla periódica, no es realmente práctico a menos que estés en los campos científicos y de química. Son un montón de desarrolladores web. Eso no es práctico para ti. Aquí hay algo que es práctico. Soy una de las pocas personas que usa Apple Music, pero hay una docena de otras personas que también usan Spotify. Este es un diseño que la gente ve bastante a menudo. Es un menú desplegable con una cola de canciones, y simplemente mueve el contenido principal hacia un lado. Ni siquiera necesita estar relacionado con la música.

Podrías tener un menú desplegable. {{^}}Podrías tener un montón de UI donde así es como revelas más información. ¿Cómo haces eso en animaciones web? Así que aquí está. Nuestro enfoque de animaciones web está realmente pasando por y usando el enfoque de animación flip donde tienes bounding client rec, donde obtienes la X, Y, ancho y alto. Vamos a recorrerlo. Vamos a tomar nuestro cambio de diseño, aplicar un nuevo diseño aquí, tomar eso de nuevo. Ahora esto va a ser toda la animación necesaria para animar la propiedad display none. Básicamente tenemos que tomar ese elemento, ponerlo en la estructura DOM, y luego mover todo de vuelta como si no estuviera allí, estableciendo la opacidad de ese elemento a cero. Y estamos haciendo mucho de posición absoluta. Estamos haciendo algo de limpieza. Lo estamos animando, y luego tenemos que limpiar después. Y eso es solo para un elemento. Ahora tenemos que hacer todo de nuevo para el otro elemento. Puedes ver cómo si tienes un diseño más complejo y UI, estás codificando todo esto junto. Así que estamos en 118 líneas de código para una demo. No, gracias. Vamos a deshacernos de esto. Vamos a hacer solo las transiciones de vista. Y en lugar de tener toda esa lógica de animación codificada aquí, vamos a moverla a estos dos fotogramas clave. Tenemos un de y un a para escalar un elemento hacia arriba y luego desvanecerlo. Queremos que algo se muestre. Lo reproducimos como normal. Queremos que algo se oculte. Simplemente lo reproducimos al revés. El soporte de animación del navegador aquí para CSS es realmente bastante bueno. Así que cuando volvemos a nuestra demo, podemos usar una transición de vista y saber que todo esto es mantenido por el navegador. Realmente no me importa a dónde va este elemento. No tengo nada en mi CSS para ese elemento azul aparte de darle un nombre. Esto solo está obteniendo, oye, reproduce esta animación si me estoy yendo. Reproduce esta animación si no me estoy yendo.

Es genial. Es mucho mejor de lo que solía ser. Ahora, además de mostrar ejemplos de vanilla puros, ¿qué tal trabajar con frameworks? Porque la mayoría de la gente trabaja con frameworks. Creo que es una suposición segura. ¿Quién usa Astro? Todos, vayan a ver Astro. Es bastante impresionante. Astro es un gran ejemplo de un proyecto que vio las transiciones de vista y fue como, sí, por favor, necesitábamos esto ayer. Tanto es así que tienen un soporte incorporado para transiciones de vista como parte de su oferta principal. Así que todo lo que tienes que hacer es realmente darle a tu documento principal este elemento de transición de vista, y obtienes transiciones de vista gratis.

Así que hay este ejemplo realmente genial que se mostró hace un tiempo donde alguien hizo esta pequeña lista de reproducción donde podías hacer clic en todos los elementos. Y usando la API de Astro, construyó todas las diferentes animaciones y tiene todo aquí funcionando. Y esto es genial. Ve a la URL de GitHub de esta persona si quieres experimentar y solo ver cómo funciona esto porque es fascinante. No estoy en el ecosistema de Astro. Estoy en el ecosistema de Angular. Lo sé, lo sé. Guarda tus comentarios para ti mismo. Pero Angular también tiene una gran historia aquí también. Así que construí esta demo básicamente recreando esa otra. Y puedes ver el código para todo esto en GitHub. Pero aquí está esa misma demo exacta, y tenemos transiciones de vista sucediendo. Funciona. Lo que es aún mejor es que si subimos aquí y simplemente hacemos clic en eso, cuando volvemos, la posición de desplazamiento se mantiene, lo cual es súper importante porque de lo contrario vas a tener esta experiencia de usuario discordante y toda la animación fue para nada. Usando Peaceful Guitar, eso funciona.

Ahora, cómo esto está funcionando es detrás de escena, en realidad estamos conectándonos a la API de transiciones de vista. Dije que ese callback solo acepta cualquier cambio en el DOM. También tiene un par de parámetros allí a los que puedes acceder. Así que podemos obtener el estado actual de la animación, averiguar de dónde venimos y hacia dónde vamos. De esa manera, si por cualquier razón en este caso, quiero asignar dinámicamente un nombre de transición de vista a un elemento, puedo hacerlo simplemente diciendo, dame la transición actual. ¿Voy a este elemento o no? Y en mi componente, puedo asignar dinámicamente este nombre de transición de vista.

Así que esto es genial, bastante simple. Lo llevé un paso más allá. Whoa. Lo llevé un paso más allá e hice otro porque no tengo nada más que hacer. Hice otro ejemplo de Spotify. Realmente me encanta construir aplicaciones de reproductores de música por alguna razón. Lo genial de este es que hay nombres de transiciones de vista generados dinámicamente para todo aquí. Y tomé una pequeña página de Astro en el sentido de que todo esto en realidad está computando un nuevo nombre de transición e insertando los estilos para esto en el DOM en tiempo de ejecución. Así que estamos usando hojas de estilo computadas. Las estamos actualizando cada vez que un nuevo elemento se introduce en el DOM. De esa manera, cuando vamos a, digamos, este ejemplo, y de hecho, si vamos y abrimos el inspector de animaciones y lo ralentizamos un poco, puedes ver lo que realmente está sucediendo. Y podemos hacer la transición. Y lo que es aún mejor es, simplemente pausemos la animación. Podemos simplemente pausar esto, inspeccionarlo. Puedes ver aquí, obtenemos el árbol de transiciones de vista. Aquí está todo lo que podríamos posiblemente animar. Completamente excesivo.

Probablemente no hagas esto, pero podrías. Así que vamos a concluir rápidamente. Las transiciones de vista son increíbles. Esto es literalmente lo que más me ha emocionado sobre la web. Me importa menos JavaScript y señales. Las transiciones de vista son lo que todos deberían estar prestando atención. Pero no es lo único en el mundo de la animación.

Hay animaciones impulsadas por el desplazamiento sin tener que recurrir a JavaScript. Hay composiciones de animación. De esa manera, puedes cambiar cómo una animación o cómo múltiples animaciones interactúan entre sí. Y hay comportamiento de transición, que te permite pasar de estados indeterminados entre display none o display block.

Así que hay muchas animaciones por ahí. Y nunca ha sido más fácil comenzar con ellas. Así que puedes revisar las diapositivas en línea. Pero muchas gracias.

Ahora que has terminado con tu charla, ¿cómo te hace sentir eso? Como si pudiera hacer una voltereta. Me encanta eso. Hay mucho espacio justo aquí. Y tengo plena fe en que lo harás. Estoy desplazado. Bien, pasemos a algunas preguntas que tenemos. Nuevamente, todos, por favor envíen sus preguntas en Slido.

Hagamos esta. La primera pregunta, la gente se pregunta, ¿la transición de vista se ejecuta en un hilo separado como keyframes en lugar del hilo principal? Así que está acelerada por hardware. Lo interesante de esto, si imaginas intentar animar ancho y alto, todo eso se ejecuta en el hilo principal. Si haces transformaciones, eso es fuera del hilo. Las transiciones de vista en realidad no están animando elementos reales, solo esencialmente imágenes. Así que todo el trabajo de transformación que se está haciendo bajo el capó, todo está usando enfoques acelerados por hardware, usando transformaciones, opacidades. Simplemente no lo estás computando. Es el navegador haciéndolo por ti. Así que todo es eficiente. Genial. Me encanta la idea de que el navegador haga todo. Soy perezoso. Cuanto más pueda hacer el navegador por mí, mejor. Oh, todos nosotros. Increíble.

La siguiente pregunta tiene muchos votos. ¿React tiene soporte para la transición de vista? Sí, lo tiene. React sí tiene soporte para ello. Hay un hook de uso de transición de vista que vi. Básicamente te da las mismas capacidades que mi directiva de Angular hacía. Esencialmente, solo estás asignando un nombre de transición de vista a cualquier elemento al que lo estés aplicando. No lo he probado, pero lo he visto en NPM.

Genial. ¿Sientes que todos los diferentes soportan una capacidad similar? ¿O una transición de vista es mejor que las otras? Todos las soportan bastante bien. Creo que React y View son los únicos con los que no he experimentado personalmente. Pero lo bueno de esto es que no necesariamente necesitas mucho trabajo para integrarlo tú mismo. Porque es solo parte de la característica del navegador, y simplemente funciona.

Genial. Sí. OK. ¿Qué hay del rendimiento? Esas son todas las preguntas. Sí, el rendimiento es realmente excelente. Obviamente, solo ve a probarlo e inspecciona. De hecho, si lo abres, lo ejecutas en una CPU con ralentización simulada, traes destellos de pintura para ver si estás haciendo repintados excesivos, el rendimiento en sí es increíblemente fluido. Mucho mejor que probablemente tu propia biblioteca de animación web personalizada. Al menos según mis mediciones, no hay un impacto mayor en ello. Y de nuevo, si estás animando 300 cosas, espera cosas malas, porque el navegador no debería estar animando 300 cosas. No puedo pensar en ningún caso de uso para eso.

Exactamente. Sin embargo, verías las cosas que he visto. Bueno, por eso estás en la silla de terapia, para hablar sobre todas las cosas que ves. Increíble. OK. Siguiente pregunta. ¿Qué navegador soporta las transiciones de vista? Esa es una gran pregunta.

Actualmente, es compatible con el navegador Chrome o Chromium, así que Edge, Arc, Chrome en sí, y Safari. Lo añadieron recientemente. Hay un nivel diferente en el que podrías hacer transiciones de vista con aplicaciones de varias páginas, así que tus páginas HTML de la vieja escuela. Eso está actualmente solo en Chrome, con algo de trabajo en curso en Safari. Firefox está un poco rezagado, pero han expresado interés en agregarlo.

Muy bien. Parece que Firefox tiene un poco de trabajo por hacer. OK. Siguiente pregunta. ¿Cómo mantendrías la imagen persistente a través de dos vistas diferentes? Y esto se refiere a la demo de Spotify. Así que mantener las imágenes persistentes a través de las diferentes vistas, siempre que sea parte de ese árbol de instantáneas. Así que si tengo imagen uno e imagen dos, siempre que esos nombres de transición de vista coincidan, el navegador lo tratará esencialmente como si fuera una sola imagen, donde puedes hacer que la animación simplemente funcione. Técnicamente va a desvanecerse en algún momento a la nueva imagen. Pero siempre que los nombres sean los mismos a través de las transiciones, se alineará y asegurará que, OK, aquí es de donde viene esta imagen. Aquí es a donde va. Haz que parezca una transición sin interrupciones.

Eso es realmente genial. Sí. También suena bastante fácil. El complicado es el video. Porque el video, si vas a una nueva página, va a reproducirse, y va a causar todo tipo de caos. ¿Y qué haces al respecto? Esperar que el usuario no lo note. Ja ja ja. Distráelos. Sí. OK. ¿Es un dolor confiar en este método en diferentes tamaños de pantalla? ¿Qué método? Suponiendo que se refieren a las transiciones de vista, sí y no.

Porque todo está principalmente impulsado por CSS, puedes integrarlo con consultas de medios bastante fácilmente. Así que si quieres que una animación se ejecute en un factor de forma, solo configuras esos nombres de transición en una consulta de medios. Si quisieras ejecutar una animación diferente en una pantalla más grande, también lo haces. Incluso puedes conectarte a consultas de medios que son como, no quiero ninguna animación, o quiero animaciones reducidas. Hay movimientos reducidos preferidos. Puedes hacer que sea solo un desvanecimiento natural, o podrías ser bastante estricto y simplemente eliminar cualquier animación en ello.

OK. Funciona muy bien. Wow, estamos volando a través de estas preguntas. Solo te las estoy lanzando. La siguiente es, ¿cómo puedes animar la forma de los elementos, como en la demo Circle to Box? Así que en la demo Circle to Box, esencialmente estás, en una parte, tenía un radio de borde de 0. En la otra parte, tenía un radio de borde de 50%. Y el navegador simplemente lo resolvió. Es un poco engañoso en el sentido de que no hay una transformación directa. No lo ves ahí arriba. Lo veo en el proyector. Pero hay una pequeña animación de desvanecimiento, o una especie de animación de ameba, la llamo, donde solo está animando el radio del borde. No necesariamente obtienes esa transformación natural. Pero si sucede lo suficientemente rápido, no necesita ser tan detallado. Tus usuarios realmente no prestarán mucha atención. Así que esta diapositiva fue un poco una mentira. Lo siento. No te preocupes.

Gracias por responder a todas las preguntas. Eso es todo el tiempo que tenemos. Asegúrate de practicar la atención plena y establecer tus límites y todo eso. Gracias. A la misma hora la próxima semana. Muchas gracias. Y esta es nuestra última parada antes del almuerzo.