¿De Quién es la Responsabilidad de la Animación?

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

La animación a menudo se sitúa entre el diseño y el desarrollo. A veces, un diseñador apasionado incluirá guías de animación en sus diseños de Figma. Si no lo hacen, a veces un desarrollador apasionado tomará la iniciativa e incluirá una animación propia. Hablemos sobre cómo hacer de la animación un ciudadano de primera clase e incluirla en tu proceso de diseño.

En esta charla cubriré algunos conceptos básicos de animación, POR QUÉ deberías considerar la animación, ejemplos de animaciones EFECTIVAS vs animaciones DISTRACTORAS, algunas ADVERTENCIAS sobre las animaciones, los diferentes TIPOS de animación (CSS vs JS, springs vs basadas en tiempo) y ¡MÁS!

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

Matt Colman
Matt Colman
19 min
17 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Matt Coleman enfatiza la importancia de la animación en los equipos y la participación del usuario, basándose en sus experiencias profesionales. Las animaciones efectivas se centran en la identidad de la marca y la experiencia del usuario, evitando el exceso de ostentación. Los elementos de la vida real en la animación de la interfaz de usuario crean familiaridad y atraen la atención. Agregar animaciones sutiles a la interfaz de usuario de Jira puede mejorar la experiencia del usuario. La colaboración entre diseñadores y desarrolladores es crucial para la creación exitosa de animaciones. Los consejos incluyen usar CSS o JavaScript para animaciones, con bibliotecas recomendadas como Framer, Greensock, Gsep y Lottie.
Available in English: Whose Job is Animation?

1. Animation and Career Experience

Short description:

Matt Coleman discute la importancia y los roles de la animación en los equipos, basándose en sus diversas experiencias profesionales en iview y Blake. Destaca la importancia de comprender el impacto de la animación en la experiencia y el compromiso del usuario.

Hola. Soy Matt Coleman. Estoy muy emocionado de estar aquí hoy en el React Summit aquí en Ámsterdam, aunque todavía estoy en Sídney. Hoy les hablo sobre de quién es el trabajo de la animación. Me gustaría que se hicieran esa pregunta ahora mismo. ¿De quién es el trabajo de la animación en su equipo? ¿Es siempre la misma persona? ¿Es un diseñador? ¿Es un ingeniero? ¿O no es nadie en absoluto?

Ahora, antes de comenzar, solo quiero mostrarles un poco sobre mi carrera y mostrarles por qué creo que estoy algo calificado para ayudar a responder esta pregunta. Así que, en realidad comencé mi carrera en iview, que es una empresa de videos, y estaba haciendo videos todos los días allí en After Effects. Y tengo un show reel de 2010 que noté que todavía está en YouTube hace 15 años, pero todavía está allí. Pueden ir y verlo. Es solo un minuto de visualización.

Y así, después de iview, pasé a Blake, y Blake es una empresa en Australia que hace juegos educativos para niños como reading eggs. Y contratamos a muchos, muchos grandes animadores en esta empresa. Así que fui ingeniero en Blake, pero aprendí mucho de mis colegas en animación. Algunos de ellos eran animadores ex-Disney, y me enseñaron un montón sobre los conceptos básicos de la animación y todas estas grandes cosas solo porque estaba interesado en el tema. Y a medida que avanza mi carrera, se vuelve un poco más aburrida cada vez. Menos y menos animación. Excepto Atlassian no es aburrido en absoluto. Es muy divertido.

2. Understanding Animation and Examples

Short description:

La animación es la esencia del movimiento en las aplicaciones web, distinguiendo entre animaciones llamativas y micro interacciones funcionales. Una animación bien ejecutada ayuda a la comprensión del usuario, ofrece retroalimentación visual, resalta elementos cruciales y crea experiencias atractivas. Ejemplos notables incluyen la página de aterrizaje del iPhone 15 Pro de Apple y la animación centrada en la marca de Canva.

Entonces, ¿qué es la animación? Bueno, estoy diciendo que la animación es cualquier movimiento o transición en tu aplicación web. Y hay una especie de diferencia entre animaciones y micro interacciones. Así que, las animaciones son probablemente como cosas llamativas, mírame tipo cosas. Mientras que las micro interacciones son como lo opuesto. Es solo como una respuesta a un clic de botón o simplemente algo para decirte que sí, hiciste eso. No está tratando de llamar la atención. Es solo funcional.

Ahora, ¿por qué la animación? Sé que mucha gente realmente encuentra la animación molesta y distractora. Pero si se hace bien, puede ayudar al usuario a entender, puede proporcionar retroalimentación visual. Llama la atención a elementos importantes y crea experiencias atractivas y encantadoras. Nuevamente, si se hace bien.

Veamos una gran animación. Así que, aquí está la página de aterrizaje del Apple iPhone 15 Pro. Elegí esta solo porque es encantadora. Sé que ya estamos en el iPhone 16 ahora, pero pensé que esta es en realidad incluso mejor. Pero casi podrías ir a cualquier página de aterrizaje de Apple. Y a medida que te desplazas hacia abajo en la página, siempre es simplemente, es tan elegante. Sabes, todo, la forma en que estos botones aparecen, está realmente en la marca. No es demasiado llamativo. Al final, solo quieres comprar un iPhone cuando llegas al final de esta página.

3. Creating Effective Brand Animations

Short description:

Animaciones efectivas y funcionales de Canva y Netflix se centran en la identidad de marca y la experiencia del usuario, evitando el exceso de ostentación. Marcas como Apple, Canva y Netflix probablemente emplean expertos en animación para mejorar su presencia digital y el compromiso del usuario. Crear grandes animaciones implica dominar conceptos básicos como el easing, añadir elementos realistas e incorporar técnicas como squash y stretch.

Realmente efectivo. Canva aquí, este es un poco llamativo, pero muy acorde con la marca. Canva es una marca divertida. Así que, estos destellos que siguen a tu ratón. Es realmente genial y efectivo. Netflix, también haciendo animación muy bien. Este es muy, muy famoso, diría yo. Algunos de nosotros veríamos esta animación diariamente o por la noche. Y es muy funcional. Este es diferente a los otros porque no es ostentoso. En realidad, solo está tratando de crear menos movimiento porque al pasar el ratón hay más información para mostrarte. Y si esa tarjeta simplemente apareciera, sería bastante distractor. Así que, esa transición solo está tratando de reducir el movimiento allí.

Entonces, ¿de quién es el trabajo de animación en Apple, Canva o Netflix? En realidad, no lo sé. Pero si lo sabes, házmelo saber. Me encantaría saber la respuesta. Pero solo mirando estas marcas, están haciendo un gran trabajo. Y diría que probablemente están contratando estratégicamente a algunos expertos en animación allí. Ya sea un diseñador con experiencia en animación o un ingeniero o simplemente un experto en animación a tiempo completo. Creo que están haciendo algo allí.

Así que, hablemos de cómo creamos grandes animaciones. Creo que, ya sabes, si quieres hacer algo grandioso, solo tienes que empezar desde el principio. Tienes que aprender lo básico. Así que, entremos en ello. Aquí hay un rebote básico de una pelota. Parece bastante aburrido. Y ahora, podemos añadir algo de easing. Empieza a ser más interesante, más realista. Squash y stretch. Aprendí esto de mis colegas de Disney.

4. Real-life Elements in UI Animation

Short description:

Las animaciones exageradas como las pelotas rebotando y las sombras sutiles crean familiaridad y atraen la atención en el diseño de UI, enfatizando la importancia de los elementos de la vida real. Atlassian carece de un proceso formal de animación, con Jira conocido por animaciones mínimas que se integran perfectamente en la experiencia del usuario.

Este es muy exagerado. Pero le da algo de vida. Y ahora, las sombras entran para darle más vida nuevamente. Y finalmente, algo de desenfoque de movimiento. Así que, podemos ver todos estos conceptos básicos de animación entrando en esta pelota. Pero mira, sé lo que estás pensando. No necesitamos pelotas rebotando en nuestro sitio web. Entonces, ¿por qué estamos aprendiendo esto? Sé que no quieres hacer que tu sitio web rebote así. O que tu logo rebote así. Lo sé. Pero el punto es que las cosas de la vida real son familiares. Así que, esta es realmente la clave para hacer animaciones exitosas para UI.

Entonces, sombras proyectadas, puedes ver una aquí en el menú desplegable de tipo de Jira. Y esta sombra proyectada alrededor de esta caja es lo que la separa del fondo y atrae tu atención. Ahora, la razón por la que usamos una sombra proyectada es porque es tan sutil y porque las cosas de la vida real son familiares. Y así, subconscientemente, ni siquiera notamos que está ahí. Todas estas cosas aquí son más o menos lo mismo. Están en tu subconsciente. Y, sabes, ¿cómo se crea realmente una sombra proyectada? Bueno, cuando navegas por la web, nunca te preguntas, como, ¿dónde está la fuente de luz para esta sombra proyectada? ¿Está el sol entrando en el sitio web? ¿O es la luz de mi habitación, como, de alguna manera entrando en el sitio web? Como, por supuesto, eso es ridículo. Pero subconscientemente estamos tan acostumbrados a ver sombras que no lo cuestionamos en absoluto.

Así que, todas estas cosas realmente se tratan de que las cosas de la vida real son familiares. Y eso es lo que tiene sentido para nosotros cuando miramos la web. Entonces, ¿de quién es el trabajo de animación en Atlassian? Bueno, pregunté a algunas personas en una encuesta. De hecho, a bastantes personas en una encuesta. Y resultó que el 85% de los Atlassians dicen que no tienen un proceso para la animación. Un colega mío realmente me dijo una vez que Jira no hace animaciones. Eso fue en respuesta a que yo dijera que tal vez deberíamos añadir una en esta parte de la UI. Y dijeron, pero no, no podemos porque Jira no hace animaciones.

5. Adding Subtle Animations to Jira UI

Short description:

Añadiendo animaciones a la UI de Jira, desapercibidas pero impactantes. Desde indicadores sutiles hasta animaciones emergentes, mejorando la experiencia del usuario a través de prueba y error.

Ahora, esto es tanto un cumplido como un problema. Es un cumplido porque las mejores animaciones son las que no notas. Pero es un problema porque los ingenieros sienten que no se les permite añadir animaciones. Ahora, Jira sí tiene animaciones. Están por toda la UI. Y así, es genial que la gente no las esté notando porque simplemente están ahí y son sutiles y están subconscientemente, sabes, ahí, supongo. Pero quiero mostrarte esta animación que añadí a la vista de despliegues de Jira. Y quiero, más importante, contarte cómo surgió y cómo la añadimos.

Así que, mientras desplazo esta vista de despliegues, puedes ver estos indicadores. Simplemente se deslizan. Y luego hay otra animación cuando hago clic en esos indicadores que te llevará de vuelta y se deslizará de regreso a donde esos indican donde están esos pequeños lozenges. Ahora, primero construí esto y no había ninguna animación en la especificación de Figma, lo cual está bien porque el diseñador era un diseñador fantástico. Y, sabes, usualmente no espero que haya ningún indicador de animación allí. Pero cuando construí esto sin animación, era simplemente, como, realmente rápido y realmente, como, brusco y horrible. Así que, simplemente añadiendo esas animaciones sutiles y luego consultando al diseñador realmente ayudó.

Aquí hay otro. Cuando hago clic en este popup, nuevamente, construí esto sin animación primero y el popup simplemente seguía mi mouse alrededor y era realmente incómodo. Como, cuando hice un desplazamiento horizontal, eso fue una indicación como usuario, como, ya no quería ver eso. Así que, elegí hacer que se deslizara y desvaneciera. Y tuve que, nuevamente, simplemente construirlo y verlo primero por mí mismo para resolver si, como, esto realmente tiene sentido. Así que, mientras deslizo, mientras desplazo horizontalmente, elijo animar el popup en la misma o en la dirección opuesta a la que estoy deslizando.

6. Designing Animation Values

Short description:

Prueba y error para la dirección de la animación, la retroalimentación del diseñador es crucial. Jade enfatiza los valores de animación y los desafíos en la comunicación.

Así que, es como si el impulso de mi desplazamiento fuera realmente la fuerza detrás, como si el viento lo estuviera soplando en esa misma dirección. Y eso funciona hacia arriba y hacia abajo y de izquierda a derecha. Y curiosamente, mi intuición siempre estaba equivocada. Así que, tuve que hacer muchas pruebas y errores allí para asegurarme de que obtuve la dirección correcta para estas animaciones. Y nuevamente, se lo mostré al diseñador después y ambos estuvimos de acuerdo. Como, oh, sí, esto es mucho mejor. Esto está, como, haciendo que la experiencia del usuario sea mucho más agradable. Así que, eso realmente vino de prueba y error.

Y algunas de estas cosas tienen que suceder después de que construyes la primera versión. Porque simplemente sería muy visionario de un diseñador entender que estas cosas serán un problema. Como, antes de realmente verlo. Ahora, quiero reproducir este video aquí. Este es de Jade, una de nuestras diseñadoras en Atlassian. Y Jade está hablando sobre un diseño que hizo como diseñadora sobre la animación de esta nueva función. Así que, echemos un vistazo.

Así que, bien. Así que, gracias, Jade. Somos muy afortunados de tener a Jade. Porque Jade es una diseñadora, claramente, con algo de experiencia en animación. Así que, puedes ver allí que Jade nos está señalando los valores de la animación. Y si estuviéramos usando una biblioteca de animación de JavaScript que aceptara tales valores físicos, como frame of motion, podríamos simplemente conectarlos directamente y eso sería exactamente lo que Jade ha diseñado. También notas que, como, hablar sobre animación es realmente difícil. Jade usa mucho sus manos para describir cómo deberían moverse las cosas. Esto es algo de lo que necesitamos, ya sabes, realmente hablar. Porque hablar sobre animación es difícil.

7. Roles in Animation Creation

Short description:

Los equipos necesitan tanto diseñadores como desarrolladores para la animación. Las grandes animaciones a menudo son resultado de la suerte. Importancia de individuos apasionados en la creación de animaciones.

A veces necesitas ver prototipos o simplemente necesitas ver los valores. Entonces, ¿de quién es el trabajo de la animación? Bueno, aquí podemos ver que tanto los diseñadores como los desarrolladores tienen un papel que desempeñar. De hecho, en ambos ejemplos, se siente como si tuviéramos suerte en ambas ocasiones. En el primer ejemplo, tuvimos suerte de que un ingeniero tuviera alguna experiencia en animación o incluso solo algún interés en la animación. Y en el segundo ejemplo, lo mismo con el diseñador. Tuvimos mucha suerte pero los equipos no necesariamente tienen a alguien que esté educado o apasionado por la animación. Y en esos equipos, sospecho que la animación simplemente no sucede. Lo que me hace pensar, ya sabes, como, tal vez muchas de las grandes animaciones web por ahí simplemente sucedieron por suerte. Suerte de que alguien en el equipo esté tarde en la noche aprendiendo cómo hacer animaciones solo porque tienen interés. Pero, ya sabes, una vez que establecemos de quién es el trabajo, entonces obviamente podemos hacerlo mejor. Echemos un vistazo a algunas animaciones geniales. Esta es una de Figma.

Recuerdo haber leído un blog de los ingenieros que construyeron esta animación. Estoy hablando específicamente del rizo allí en la nota adhesiva. Estaban describiendo cómo obtuvieron la sombra perfecta y cómo el tiempo de ese rizo. Y fue una lectura tan buena porque estaban tan apasionados por lograr que esta animación fuera perfecta y estaban tan orgullosos de sí mismos cuando la completaron. Necesitamos más de eso. Como, necesitamos personas apasionadas como esa para hacer estas grandes animaciones. Airbnb, esta animación ha estado aquí probablemente por 10 años. Todavía está allí hoy. Recuerdo haberla visto por primera vez y estaba tan impresionado de cómo esa pequeña caja de búsqueda se transformó en la caja de búsqueda más grande. La grabé en QuickTime, la ralentizé cuadro por cuadro, y fue simplemente perfecta. Sospecho que estaban usando frame of motion en ese momento. Realmente genial animación.

Esta animación la añadí yo mismo cuando estaba trabajando para PlayUp. Este es el producto de estilo draft. Y queríamos esta forma divertida de auto completar tu equipo de baloncesto o tu equipo de fútbol o lo que sea. Y cuando completé esta función, no había animación y simplemente se sentía tan plana. Era súper aburrida. Así que, añadí este tipo de cosa de jugador parpadeante y simplemente tiene como ese uno o uno y medio segundos de emoción mientras te preguntas qué equipo vas a elegir.

8. Collaborative Approach to Animation

Short description:

Importancia del esfuerzo colaborativo en la animación entre diseñadores y desarrolladores. Consejos para que diseñadores y desarrolladores mejoren sus habilidades de animación y colaboración para un diseño consistente.

Esta animación todavía está allí hoy y el producto es realmente exitoso y a los usuarios les encanta. Entonces, ¿de quién es el trabajo de la animación? Finalmente, vamos a hacer un redoble de tambores y te voy a decir de quién es el trabajo. Bueno, es el trabajo de todos. Está bien. Sé que eso es realmente tonto. No me gusta esa respuesta. Retiro esa respuesta. Creo que en realidad la respuesta es más como esta. Es algo así como entre un diseñador y un desarrollador. Y depende de tu equipo. Podría ser cualquiera de los dos. Pero en mi experiencia, siempre ha sido algo no dicho y los diseñadores y los desarrolladores se han encargado de introducir animación donde sea necesario.

Y entonces, el riesgo aquí es que si es el trabajo de ambos, entonces también es el trabajo de ninguno. Y a menudo es por eso que la animación se olvida por completo. Así que, hay algunos consejos aquí. Voy a pasar por estos rápidamente porque estoy totalmente corto de tiempo. Solo quiero animar a los diseñadores a llenar ese vacío de conocimiento un poco, como realmente mejorar en animación y aprender sobre ello si no lo haces. Lo mismo con los desarrolladores, si no sabes nada sobre animaciones CSS versus JavaScript o bibliotecas de animación o tiempos o resortes, simplemente ve y lee sobre ello y adquiere algo de conocimiento.

También quiero empoderar a los desarrolladores para que realmente no asuman que es el trabajo del diseñador todo el tiempo. Si lo construyes y no se siente bien y parece que le falta movimiento, entonces ve y sugiere algunas animaciones o toma ese tiempo para colaborar con el diseñador. Añadir animación al sistema de diseño también va a ayudar con la consistencia, pero es realmente complicado. No siempre es obvio cómo añades animación al sistema de diseño. Y finalmente, solo piensa en cómo puedes introducir un proceso para la animación para que no se olvide. Consejos rápidos de diseño. Me encanta este consejo. Graba tu UI con QuickTime y luego puedes presionar la barra espaciadora para pausar, flecha izquierda para retroceder un cuadro, flecha derecha para avanzar un cuadro. Va a captar esos pequeños detalles que tu ojo puede detectar, pero no puede decir qué está pasando. Consejo realmente importante allí. Lo hago todo el tiempo. Piensa en dónde viven los elementos en el espacio físico.

9. Creating Quick and Effective Animations

Short description:

Consejos para crear animaciones rápidas y efectivas. Usa CSS o JavaScript según la complejidad. Bibliotecas de JavaScript recomendadas: Framer, Greensock, Gsep y Lottie. Gsep ahora es gratuito y altamente recomendado para animaciones.

Deberías poder explicar tu animación como con tus manos. Nuevamente, pretender que esta cosa está en un espacio 3D real va a ayudar a tu animación. Haz que esas animaciones sean rápidas. Tu animación por defecto no debería ser de un segundo, como la mayoría de la gente hace si no tiene experiencia. Cambia tu defecto a como 0.2 o 0.3 segundos. Hazlas rápidas. Y si es un elemento más grande en la pantalla, dale más tiempo. Nuevamente, ese elemento tiene más masa, y las cosas de la vida real ayudan.

Así que, finalmente, no hagas que la gente se enferme con tus animaciones y mantente en la marca. Algunos consejos rápidos para desarrolladores. Ahora muy rápido, CSS es tu primera opción. Animación o transición, ambas son rápidas y ligeras. Animaciones de JavaScript, usa estilos en línea. Son realmente eficientes. Si deseas animaciones complejas, entonces recurre a bibliotecas de JavaScript como Framer, Greensock, Gsep, de hecho, o Lottie. Gsep, por cierto, ahora es gratuito desde hace como una semana. Increíble. Gsep es totalmente asombroso, así que pruébalo. Es gratis.

Bien. Muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
React Summit US 2023React Summit US 2023
28 min
El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
Top Content
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
React Day Berlin 2022React Day Berlin 2022
28 min
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.
Las animaciones en React Native deben ser divertidas
React Advanced 2022React Advanced 2022
28 min
Las animaciones en React Native deben ser divertidas
This talk is about animations in React Native, specifically focusing on React Native Reanimated. It covers the use of interpolations and extrapolations in animations, animating items in a carousel or list, sticky elements and interpolation, and fluidity and layout animations. The talk provides valuable tips and tricks for creating performant animations and explores the use of math formulas for natural movements.
Sigue Desplazándote
JSNation Live 2021JSNation Live 2021
33 min
Sigue Desplazándote
Scroll animations can enhance user experience when done properly, but should not distract from important information. CSS, JavaScript, and plugins like Scroll Trigger can be used to achieve scroll animations. GreenSock's ScrollTrigger provides a powerful JavaScript animation library for more complex animations. It is important to consider accessibility and provide reduced motion fallbacks. CodePen and GreenSock's documentation are valuable resources for learning and inspiration in creative coding.
Animación y Vue.js
Vue.js London Live 2021Vue.js London Live 2021
32 min
Animación y Vue.js
Today's Talk covers animation in Vue JS apps, including CSS animations, JavaScript animations using the GSAP library, and handling multiple elements with transition groups. The Talk also discusses different kinds of movements, state transitions, and animating numbers and SVGs. Overall, it provides a comprehensive overview of animation techniques and tools for enhancing Vue JS apps.
Animaciones con JS
JSNation 2022JSNation 2022
19 min
Animaciones con JS
Today's talk is about animations in Javascript, covering frame rates and different methods like CSS transitions and animations. JavaScript provides more control over animations, allowing interpolation and simulation of real-world scenarios. Different approaches to animating a box from zero to 100 pixels are discussed, including for loops, timers, and the web animations API. Request Animation Frame is highlighted as a solution for consistent and smooth animations. The Web Animations API is introduced as a powerful tool alongside CSS animations and transitions, although it has limited browser support.

Workshops on related topic

Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
Workshop
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.