¿Qué es Framer Motion y para qué sirven las animaciones en una página web?
Framer Motion · En inglés: Framer Motion (Motion for React) · Tecnología web
Framer Motion, hoy llamado Motion for React, es una librería de animación para páginas hechas con React. Sirve para que los elementos entren al hacer scroll, cambien con suavidad o se muevan al pasar de una página a otra.
Qué es Framer Motion, paso a paso
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.
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.
Lo mismo, en pequeño y en grande
La página de un restaurante
El menú aparece suavemente al bajar la pantalla y los platos se acomodan sin saltos. Si el visitante pidió menos movimiento en su celular, la página lo respeta.
La app de una empresa
Las animaciones más pesadas se pausan cuando salen de la pantalla, para no cansar el procesador ni gastar batería del teléfono.
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.
Pon a prueba lo que leíste
Elige A, B o C. Si fallas, lees el porqué y pruebas otra vez.
A una persona las animaciones la marean. ¿Qué debe hacer una página bien hecha?
Aprende jugando
Memoria: las herramientas del taller
Fuentes
Memoria: las herramientas del taller
Otros temas que te pueden interesar
También se le dice