La diferencia entre una buena animación y una animación excelente

• La animación es un elemento clave que determina la calidad de la UI; va más allá de verse bien y aporta una sensación natural y una interacción intuitiva
• Para crear animaciones excelentes, es indispensable comprender el origen del movimiento, la elección adecuada del easing, el uso del efecto de resorte y un conocimiento profundo de las herramientas
• Más que las funciones básicas de easing de CSS, las curvas de easing personalizadas pueden transmitir una sensación de inmersión y energía mucho mayor
• Con el hook useSpring de Framer Motion, las interacciones basadas en la posición del mouse se sienten más realistas y suaves
• Cuanto más profundo sea el entendimiento de las propiedades de CSS, más fácil será implementar creativamente nuevas animaciones o mejorar las ya existentes

---

Animación consciente del origen

• Cuando un menú desplegable se abre al hacer clic en un botón, se siente más natural si el movimiento comienza desde la posición del botón
• En lugar del valor predeterminado transform-origin: center, configurarlo como bottom center resulta visualmente más natural
• Si usas Radix o shadcn/ui, esto puede manejarse automáticamente

  .radix-dropdown {  
    transform-origin: var(--radix-popover-content-transform-origin);  
  }  
  

Uso del easing adecuado

• En la mayoría de los casos, ease-in-out ofrece una curva de aceleración y desaceleración más natural que ease-in
• En particular, cuando se mueve un elemento que ya existe en pantalla, es importante que el movimiento sea realista, como un auto que arranca y se detiene
• Se recomienda ease-out como valor predeterminado; los detalles pueden consultarse en un enlace aparte

Uso de curvas de easing personalizadas

• El easing básico de CSS (ease-in, ease-out) tiene poca expresividad, por lo que la sensación real es débil
• ease es adecuado para efectos simples como hover, pero para la mayoría de los movimientos se necesita easing personalizado
• Recursos recomendados:
  • easing.dev
  • easings.co

Interacción basada en resortes

• Si un elemento responde de inmediato a la posición del mouse, puede sentirse artificial
• Al aprovechar useSpring de Framer Motion, los cambios de valor se reflejan gradualmente como un resorte, lo que aporta un movimiento más realista y suave
• Es especialmente efectivo en animaciones meramente decorativas, aunque en UI funcionales puede haber excepciones

Entender las herramientas

• Ejemplo: al cambiar de pestaña, el color del texto y la barra de resaltado deben transicionar juntos de forma natural
• Para lograrlo, hay que aprovechar adecuadamente cosas como clip-path para que la animación no se sienta torpe
• Revisar cuadro por cuadro o reproducir en cámara lenta ayuda a identificar diferencias sutiles
• Con las transformaciones 3D de CSS también es posible crear de forma creativa efectos de órbita o animaciones de carga en 3D

¿Por qué es importante?

• Hoy en día, la mayoría del software ya es funcionalmente lo suficientemente bueno
• Para ofrecer una experiencia diferenciada, es indispensable una UI agradable al tacto y a la vista, y la animación es su núcleo
• Entender cuándo, cómo y por qué aplicar animaciones influye enormemente en la calidad del producto
• Se puede profundizar más en el curso Animations on the Web

[rhrnakrnakr]

El título y el contenido no coinciden. Me engañaron.

[ndrgrd]

La animación está bien, pero hay demasiadas páginas que hacen que la atención se vaya a la animación más que al contenido.

Sobre todo, cuando la animación incluso interrumpe el ritmo de lectura, me da fastidio antes de siquiera empezar a leer.