Framer Motion y Lottie

Animaciones Avanzadas con Librerías Modernas

Cuando CSS no es suficiente (animaciones basadas en gestos, physics-based, o secuencias complejas), es momento de usar librerías especializadas. Framer Motion para React y Lottie para animaciones pre-renderizadas son las herramientas estándar de la industria en 2026.

Framer Motion: animación declarativa para React

• motion.div es un div con superpoderes de animación — animate, whileHover, whileTap, exit


• Spring animations: movimiento basado en física con resorte — se siente más natural que ease curves


• AnimatePresence: anima elementos que entran y salen del DOM (mount/unmount) — imposible con CSS puro


• Layout animations: Framer Motion anima automáticamente cambios de layout (reorder, resize) con layout prop


• Gestures: drag, pan, tap con spring physics — para interfaces móviles y interactivas

Lottie: animaciones vectoriales ultra ligeras

• Lottie renderiza animaciones exportadas de After Effects como JSON — pesan kilobytes, no megabytes


• Perfecto para: ilustraciones animadas, onboarding screens, empty states, íconos animados, loading states


• LottieFiles.com: biblioteca gratuita con miles de animaciones Lottie listas para usar


• Se integra con React (lottie-react), Vue, Flutter, iOS y Android — cross-platform


• No necesitas saber After Effects: LottieFiles tiene un editor online para modificar colores y velocidad

GSAP: para animaciones de línea de tiempo

• GSAP (GreenSock Animation Platform) es la librería de animación JavaScript más potente y flexible


• Timeline: encadena múltiples animaciones en secuencia, paralelo o con overlaps precisos


• ScrollTrigger: animaciones vinculadas al scroll — para landing pages narrativas y storytelling visual


• Ideal para: landing pages complejas, animaciones narrativas, SVG animation, scroll-driven experiences


• Más complejo que Framer Motion pero más poderoso para secuencias de animación elaboradas

¿Cuál usar cuándo?

• CSS puro: micro-interacciones (hover, focus, transitions simples) — siempre la primera opción


• Framer Motion: animaciones de componentes en React (enter/exit, gestures, layout, springs)


• Lottie: ilustraciones animadas complejas, íconos animados, animaciones que un diseñador creó en After Effects


• GSAP: landing pages narrativas, scroll animations, timelines complejas, SVG animation


• Regla: usa la herramienta más simple que resuelva tu necesidad — no uses GSAP para un hover effect

Ejemplo práctico

// Framer Motion - React component con animación

import { motion, AnimatePresence } from 'framer-motion';



function Card({ isVisible }) {

  return (

    <AnimatePresence>

      {isVisible && (

        <motion.div

          initial={{ opacity: 0, y: 20 }}

          animate={{ opacity: 1, y: 0 }}

          exit={{ opacity: 0, y: -20 }}

          transition={{ type: 'spring', stiffness: 300, damping: 25 }}

          whileHover={{ scale: 1.02 }}

          whileTap={{ scale: 0.98 }}

        >

          Card content

        </motion.div>

      )}

    </AnimatePresence>

  );

}

Consejo: Si usas React, Framer Motion es la respuesta al 90% de tus necesidades de animación. Instálalo con 'npm install framer-motion' y empieza con motion.div + animate prop.