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.