Animaciones Web con GSAP y Framer Motion

Las animaciones son fundamentales para crear experiencias web memorables. En este artículo, comparamos las dos bibliotecas más populares y te mostramos cuándo usar cada una.

GSAP vs Framer Motion

Ambas son excelentes, pero tienen diferentes fortalezas:

Característica	GSAP	Framer Motion
Ecosistema	JavaScript vanilla	React
Curva de aprendizaje	Moderada	Más simple
ScrollTrigger	Incluido	Requiere hook
Timeline	Muy potente	Básico
Bundle size	~60kb	~30kb

Cuándo usar GSAP

GSAP es ideal para:

• Animaciones complejas basadas en scroll
• Timelines con múltiples elementos
• Control preciso de timing
• Proyectos que no son React

Ejemplo básico de GSAP

import { gsap } from 'gsap';

// Animación simple
gsap.to('.elemento', {
  x: 100,
  opacity: 1,
  duration: 1,
  ease: 'power2.out'
});

// Timeline
const tl = gsap.timeline();
tl.from('.titulo', { y: 50, opacity: 0 })
  .from('.subtitulo', { y: 30, opacity: 0 }, '-=0.3')
  .from('.boton', { scale: 0.8, opacity: 0 }, '-=0.2');

ScrollTrigger

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

gsap.from('.seccion', {
  scrollTrigger: {
    trigger: '.seccion',
    start: 'top 80%',
    end: 'bottom 20%',
    scrub: true
  },
  y: 100,
  opacity: 0
});

Cuándo usar Framer Motion

Framer Motion brilla en:

• Proyectos React
• Animaciones de componentes
• Gestos (drag, hover, tap)
• Transiciones de página
• Código más declarativo

Ejemplo básico de Framer Motion

import { motion } from 'framer-motion';

function MiComponente() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      Contenido animado
    </motion.div>
  );
}

Variants para animaciones complejas

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const item = {
  hidden: { y: 20, opacity: 0 },
  visible: { y: 0, opacity: 1 }
};

function Lista({ items }) {
  return (
    <motion.ul variants={container} initial="hidden" animate="visible">
      {items.map(i => (
        <motion.li key={i} variants={item}>
          {i}
        </motion.li>
      ))}
    </motion.ul>
  );
}

Combinando ambas

En proyectos grandes, podés usar ambas:

• Framer Motion para componentes React y transiciones de página
• GSAP para animaciones scroll-driven y efectos complejos

'use client';

import { useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

function SeccionAnimada() {
  const ref = useRef(null);

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const ctx = gsap.context(() => {
      gsap.from('.parallax-element', {
        scrollTrigger: {
          trigger: ref.current,
          scrub: true
        },
        y: -100
      });
    }, ref);

    return () => ctx.revert();
  }, []);

  return (
    <motion.section
      ref={ref}
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
    >
      <div className="parallax-element">
        Contenido con parallax
      </div>
    </motion.section>
  );
}

Buenas Prácticas

1. Accesibilidad

Siempre respetá las preferencias del usuario:

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (!prefersReducedMotion) {
  // Ejecutar animaciones
}

2. Performance

• Animá solo propiedades de bajo costo: transform y opacity
• Usá will-change con moderación
• Desactivá animaciones en scroll en mobile si afectan el rendimiento

3. Coherencia

• Definí easings consistentes en todo el sitio
• Mantené duraciones similares para acciones similares
• Creá un sistema de animaciones reutilizable

---

Conclusión

No hay una respuesta universal sobre cuál biblioteca es mejor. La elección depende de tu proyecto, equipo y necesidades específicas.

Lo importante es usar las animaciones con propósito: para guiar la atención, dar feedback y crear experiencias memorables, no para impresionar técnicamente.

¿Qué biblioteca preferís usar? ¡Contanos en los comentarios!