Framer Motion
En inglés: Framer Motion (Motion for React)
Conjunto de código ya hecho para animar páginas creadas con React, como transiciones y entradas de secciones.
¿Qué es Framer Motion y para qué sirven las animaciones en una página web?
Framer Motion es una librería de animación para React. Su documentación actual la presenta como Motion for React, "previously Framer Motion", y hoy se instala con el paquete motion, aunque muchos proyectos siguen usando el nombre anterior, framer-motion.
Sirve para que los elementos entren al hacer scroll, cambien de estado con suavidad o se muevan al pasar de una página a otra, con control fino sobre la duración y la curva de cada movimiento.
Por qué le importa a tu negocio
El movimiento bien usado guía la mirada hacia lo importante y hace que un sitio se sienta vivo y cuidado. Mal usado, marea o vuelve lenta la página en celulares modestos. La regla práctica es que cada animación tenga un propósito y respete a quien pidió menos movimiento en su dispositivo.
Cómo lo usamos en Damorus
Este sitio usa framer-motion 11, entre otras cosas, para la pantalla de carga que se abre como una persiana y para la píldora de navegación del celular, que se encoge al bajar. En URG Technology también usamos framer-motion 11, y ahí las animaciones costosas se pausan cuando salen de la pantalla para aliviar el procesador del teléfono. En los dos casos el movimiento respeta la preferencia de menos movimiento del dispositivo.
Fuentes
¿Lo necesitas en tu proyecto?
Quiero mi boceto gratuito →