25 ejemplos de Framer Motion (Motion for React) funcionando en vivo: fundidos, stagger, layout, elementos compartidos, modales, acordeones, drag, progreso de scroll, transiciones de página y movimiento reducido.
Framer Motion, que ahora se publica como Motion for React, anima cualquier elemento que sustituyas por un componente motion: define las props initial, animate y transition. Las 25 recetas de abajo funcionan en vivo en esta página, cada una con código para copiar: entradas, stagger, drag, layout y elementos compartidos, animaciones de salida, progreso de scroll, transiciones de página y movimiento reducido.
Instalación
Cada demo de esta página es el código que tiene al lado, ejecutándose en tu navegador. Las recetas usan el paquete motion; si tu proyecto todavía usa framer-motion, los componentes y las props son los mismos y solo cambia la ruta de importación.
Sí. La librería pasó a llamarse Motion y la parte de React se importa desde motion/react. El paquete framer-motion se sigue publicando con la misma API, así que los tutoriales antiguos siguen funcionando.
El elemento debe ser hijo directo de AnimatePresence, tener una key única y una prop exit. Si también se elimina el padre de AnimatePresence, no queda nada que animar.
Anima height de 0 a "auto" en un elemento motion y define overflow como hidden. Motion mide la altura real por ti, algo que las transiciones CSS no pueden hacer.
Los componentes motion usan APIs del navegador, así que el archivo que los renderiza necesita "use client". Un server component puede seguir renderizando ese client component y pasarle children.
No si te limitas a transforms y opacity, que se ejecutan sin recalcular el layout. Las animaciones de layout grandes y muchos elementos a la vez cuestan más; prueba en un móvil de gama media y usa LazyMotion para reducir el bundle.
Props y hooks usados en esta página
initial es el primer fotograma y animate es donde termina. No hace falta nada más para una entrada puntual.
Moverse con y usa un transform de CSS, así que el elemento nunca empuja a sus vecinos mientras se desplaza.
Las variants son estados con nombre. El padre transmite su estado hacia abajo y staggerChildren retrasa cada hijo un poco más que el anterior.
whileInView inicia la animación cuando el elemento entra en el viewport; once: true evita que se repita con cada scroll.
Un array es una lista de keyframes. times los reparte a lo largo de la duración, de 0 a 1.
whileHover y whileTap animan hacia un estado mientras dura el gesto y luego vuelven solos.
dragConstraints acepta una ref a un elemento padre, así que el elemento nunca se puede arrastrar fuera de él.
Arrastra en un eje y luego lee el desplazamiento y la velocidad en onDragEnd para decidir si la tarjeta se va o vuelve a su sitio.
Reorder.Group mantiene el array en el estado y te entrega el nuevo orden. Cada Reorder.Item necesita el valor que representa.
Animar x a través de unos pocos keyframes da el típico temblor. Lánzalo cambiando una key o invocando animate desde useAnimate.
Añade layout y cambia el tamaño o la posición con CSS normal. Motion mide antes y después y anima la diferencia con transforms.
Dos elementos con el mismo layoutId se tratan como uno. Cuando el subrayado se renderiza bajo una pestaña nueva, se desliza hasta allí.
React elimina los elementos al instante. Envolverlos en AnimatePresence mantiene montado al hijo que sale hasta que termina su animación de salida.
El fondo y el panel se funden a la vez; además, el panel sube. Mantén la semántica real del diálogo (role, foco, Escape) en tu propio código.
Motion puede animar hasta height: "auto", algo que las transiciones CSS simples no pueden. overflow hidden evita que el texto se desborde mientras se abre.
layout en cada notificación hace que las demás suban con suavidad cuando una se va. popLayout hace que la que sale deje de ocupar espacio al instante.
mode="wait" deja que la página antigua termine de salir antes de que entre la nueva. La key debe cambiar con la ruta.
useScroll da scrollYProgress de 0 a 1. Pasa container para seguir una caja con scroll en lugar de la ventana, y escala la barra con ese valor.
useTransform mapea un motion value a otro rango, para que una capa se mueva a una velocidad distinta del scroll.
animate() puede controlar un motion value. useTransform lo redondea, y renderizar el motion value directamente evita un render de React en cada fotograma.
pathLength va de 0 a 1 en cualquier path, circle o line, y es la forma más rápida de dibujar una marca de verificación o una firma.
repeat: Infinity con un ease lineal da un giro constante. Acompáñalo de texto visible o para lectores de pantalla que diga qué se está cargando.
useAnimate devuelve una ref de ámbito y una función animate. Esperar cada llamada con await ejecuta los pasos en orden, y stagger reparte un paso entre muchos elementos.
Stiffness define la fuerza con la que tira el muelle, y damping lo rápido que se estabiliza. Un damping bajo se pasa de largo y oscila.
MotionConfig reducedMotion="user" desactiva las animaciones de transform y de layout para quienes piden menos movimiento en su sistema, pero mantiene los fundidos.
Un archivo template.tsx se vuelve a montar en cada navegación, a diferencia de layout.tsx, así que su paso de initial a animate se ejecuta cada vez que cambias de página. Necesita "use client" porque usa motion.
El componente m junto con LazyMotion carga solo las funcionalidades que enumeras. domAnimation cubre animaciones, variants, salidas y gestos; domMax añade drag y layout.
¿Prefieres un efecto sin JavaScript? Prueba el
Repetir
Hola
Tarjeta
Planificar
Diseñar
Construir
Lanzar
Desplázate hacia abajo en esta caja.
Contenido de la sección
Púlsame
Bola arrastrable
Tarjeta {n}
{card}: deslízame
Restablecer
Logo
Menú
Hero
Pie de página
Contraseña (aquí cualquier respuesta es incorrecta)
Iniciar sesión
Agranda o encoge la caja
Inicio
Precios
Blog
Ocultar
Mostrar
Abrir modal
Guardado
Cerrar
¿Qué incluye?
Alojamiento, una dirección gratuita y el editor.
Borrador {n} guardado
Añadir notificación
Bienvenido a casa.
Sobre este estudio.
Saluda.
Párrafo {n}. Sigue desplazándote para ver cómo se llena la barra mientras lees esta caja.
Cargando
Uno
Dos
Tres
Reproducir
Mover
Tu sistema pide movimiento reducido: {answer}. Si es sí, la caja de abajo solo se funde.
Renderizado con el componente m
Empieza gratis · Sin tarjeta de crédito