GSAP y Animación Guiada por Scroll

Tweens, no keyframes

Cada movimiento en mis sitios — revelaciones de panel, estados hover, transiciones entre secciones — es un tween de GSAP, no una animación CSS por keyframes. Los tweens son direccionables: pueden detenerse a mitad de vuelo, encadenarse, invertirse o redirigirse en respuesta a la entrada del usuario, algo que las animaciones por keyframes no pueden hacer sin un montón de workarounds a base de alternar clases.

El easing se elige deliberadamente para cada interacción, no se deja en el valor por defecto. power2.inOut para movimientos de cámara que necesitan sentirse con peso en ambos extremos, back.out(1.2) para elementos de interfaz que deben pasarse ligeramente de largo y asentarse — la diferencia es sutil, pero es la que separa un movimiento que se siente diseñado de uno que se siente como el valor por defecto de un plugin.

Más allá de ScrollTrigger: un sistema de scroll guiado por cámara

ScrollTrigger vincula el progreso de la animación a la posición real de scroll del documento — perfecto para la mayoría de los sitios. La página de inicio de este sitio no usa en absoluto el scroll real del documento: cada gesto de rueda o swipe mueve una cámara de Three.js a lo largo de una trayectoria 3D, y GSAP anima directamente la posición de la cámara en lugar de vincularla a scrollTop.

Eso requirió sustituir los callbacks onEnter/onLeave de ScrollTrigger por un pequeño almacén pub/sub (un patrón subscribe/setActiveIndex) al que escucha cada componente consciente de su sección. Los componentes que antes dependían de la posición de scroll — una revelación de entrada, un cambio de fondo de la barra de navegación, un disparador de autoplay — ahora dependen de "qué índice de sección está activo", desacoplando la lógica de animación de cualquier implementación concreta de scroll subyacente.

El resultado: las secciones pueden transicionar mediante una cámara virtual, una barra de scroll, un gesto de swipe o un clic — la misma señal de finalización llega a cada escucha sin importar qué entrada la disparó.

Responsive por breakpoint, no por conjetura

gsap.matchMedia() delimita la configuración de la animación a breakpoints específicos, de modo que una revelación de escritorio guiada por hover y una versión móvil guiada por toque pueden coexistir en el mismo componente sin comprobaciones en tiempo de ejecución dispersas por la lógica — los usuarios móviles nunca pagan el coste (en ejecución de JS o en layout) de una interacción pensada solo para escritorio.