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

This ad is not shown to multipass and full ticket holders
React Advanced
React Advanced 2025
November 27 - 1, 2025
London, UK & Online
We will be diving deep
Learn More
In partnership with Focus Reactive
Upcoming event
React Advanced 2025
React Advanced 2025
November 27 - 1, 2025. London, UK & 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.

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.