Versión en EspañolES

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

Pequeñas animaciones pueden hacer que las UIs sean más agradables y mejorar la experiencia del usuario. En esta charla, exploraremos cómo agregar estas animaciones a tus aplicaciones de React, utilizando desde simples transiciones de CSS hasta un movimiento más complejo basado en spring.

Recorreremos ejemplos prácticos para mostrar cómo estas animaciones pueden mejorar la experiencia del usuario sin interponerse en el camino. Además, discutiremos cómo mantenerlas funcionando sin problemas y asegurarnos de que sean accesibles para todos.

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

animations

Kateryna Porshnieva

27 min

21 Nov, 2025

Comments

Video Summary and Transcription

La importancia de las animaciones en mejorar la experiencia del usuario al cerrar la brecha entre las expectativas del usuario y las interfaces digitales. Ejemplos prácticos de creación de animaciones utilizando transiciones de CSS y keyframes para efectos suaves y complejos. Utilización de funciones de temporización con curvas cúbicas de Bezier para diversas animaciones y consideraciones de accesibilidad. Introducción de Vue Transitions como una potente API web para animaciones fluidas con amplio soporte de navegadores. Personalización de Vue Transitions para efectos únicos, optimización del uso con nombres únicos y desactivación global, y transición a animaciones basadas en Spring para interacciones naturales de la UI. Exploración de FramerMotion y Motion Library para animaciones en React, configuración del comportamiento de spring para efectos suaves, y mejora de animaciones con Motion y CSS para una mejor experiencia del usuario.

Available in English: Practical Guide to Animation in React

Video transcription and chapters available for users with access.

Available in other languages:

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 2023

28 min

El Potencial Caprichoso de los Marcos de Trabajo de JavaScript

Top Content

Josh Comeau

The Joy of React

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.

design animations fun demos

Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React

React Day Berlin 2022

28 min

Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React

Elizabet Oliveira

Xata

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.

react animations fun demos

Las animaciones en React Native deben ser divertidas

React Advanced 2022

28 min

Las animaciones en React Native deben ser divertidas

Catalin Miron

Senior Engineer

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.

user experience react native react native animation animations

Sigue Desplazándote

JSNation Live 2021

33 min

Sigue Desplazándote

Cassie Evans

GreenSock

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.

animations

Animación y Vue.js

Vue.js London Live 2021

32 min

Animación y Vue.js

Callum Macrae

Author of Vue.js: Up and Running

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.

vue animations vue 3

Animaciones con JS

JSNation 2022

19 min

Animaciones con JS

Aashima Ahuja

Freelance Consultant

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.

animations